clone jQuery
$( ".hello" ).clone().appendTo( ".goodbye" );
Annoying Ant
$( ".hello" ).clone().appendTo( ".goodbye" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
}jQuery("#NodesToMove").appendTo('#DestinationContainerNode')Works great with Dynamically created list. Reading in from a database.
<style type="text/css">
.fw-code-copy {
display: block;
position: relative;
width: 400px;
height: 30px;
background: #FFE;
border: thin solid #FF0;
margin-bottom: 0.5em;
padding: 0.5em;
}
.fw-code-copy-button {
position: absolute;
top: 8px;
right: 8px;
padding: 0.25em;
border: thin solid #777;
background: #800080;
color: #FFF;
}
.fw-code-copy-button:hover {
border: thin solid #DDD;
background: #992699;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-1.css"></code>
</span>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-2.css"></code>
</span>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-3.css"></code>
</span>
<script>
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return $(trigger).parent().find('code').first().text().trim();
}
});
</script>