Question

我如何制作它，以便当我点击按钮时它将复制下面的代码：

<li class="widget color-blue">  
                <div class="widget-head">
                    <h3>Work list stuffs</h3>
                </div>
                <div class="widget-content">
                    <p>Accessed from private link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>

我该怎么做？我认为它可能需要Javascript ...

Answer 1

查看jQuery Clone方法。

考虑以下HTML：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

以下jQuery代码

$('.hello').clone().appendTo('.goodbye');

会产生：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

Answer 2

在原始JavaScript 中，使用cloneNode()：（example）

<强> HTML：

<ul id="somelist">
    <li id="bar" class="widget color-blue">  
        <div class="widget-head">
            <h3>Work list stuffs</h3>
        </div>
        <div class="widget-content">
            <p>Accessed from private link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
        </div>
    </li>
</ul>

<a id="foo" href="#">Duplicate</a>

<强> JS：

var link = document.getElementById('foo');
link.onclick = function() {
    var list = document.getElementById('somelist');
    var item = document.getElementById('bar');
    var clone = item.cloneNode(true);
    clone.id = '';
    list.appendChild(clone);
};

或者，如果您使用 jQuery ，请使用jQuery的.clone()：

<强> HTML：

<ul id="somelist">
    <li id="bar" class="widget color-blue">  
        <div class="widget-head">
            <h3>Work list stuffs</h3>
        </div>
        <div class="widget-content">
            <p>Accessed from private link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
        </div>
    </li>
</ul>

<a id="foo" href="#">Duplicate</a>

<强> JS：

$('#foo').click(function() {
    $('#bar').clone().appendTo('#somelist');
});

示例： here.

Answer 3

使用jQuery ...

var HTMLstr = '<li class="widget color-blue"><div class="widget-head"><h3>Work list stuffs</h3></div><div class="widget-content"><p>Accessed from private link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p></div></li>';

var duplicate = function(){
    $("<div />", { html: HTMLstr }).appendTo("body");
};

$("#duplicateBtn").click(duplicate);

...或者你可以使用$.clone()。

Answer 4

<div id="test">
    <li class="widget color-blue">  
        <div class="widget-head">
            <h3>Work list stuffs</h3>
        </div>
        <div class="widget-content">
            <p>Accessed from private link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
        </div>
    </li>
</div>

<button id="copy" onClick="copy()">Button B</button>

<div id="test2"></div>

var copy = function(){

    document.getElementById( "test2" ).innerHTML = document.getElementById( "test" ).innerHTML;

}

Answer 5

你可以尝试使用javascript，听取被点击的按钮，然后在某个地方插入代码，或者在。之间插入代码。

尝试javascript events或jquery html manipulation，了解如何监听点击按钮和执行新代码等事件的好例子。

Answer 6

试试这个，

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").clone().appendTo("body");
  });
});
</script>
</head>
<body>
<button id="x" style="display: block;" onclick="document.getElementById('x').style.display = 'none'">Clone</button>
<li class="widget color-blue">  
                <div class="widget-head">
                    <h3>Work list stuffs</h3>
                </div>
                <div class="widget-content">
                    <p>Accessed from private link Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
                </div>
            </li>
</body>
</html>

按钮单击“复制HTML代码”

6 个答案: