js:
Add to specified location
Parent. AppendChild method appends (tags created) child elements
oUl.appendChild(oLi); / / to be added later
Parent. InsertBefore (new element, inserted element)
oUl.insertBefore(oLi,oUl.children[0]); / / insert before
Parent. Replacechild (new node, replaced node)
document.body.replaceChild(oDiv,oP); the former replaces the latter
Element. cloneNode(true); / / add true and clone all the following descendant nodes at the same time
Var clel = odiv. Clonenode(); / / clone only the element itself
Only cloning the element itself will not clone all the nodes under the element (default false), nor the event. To clone an event, you need to:
oDiv3.appendChild(cEle);
AppendChild, insertBefore and replacechild can operate nodes created dynamically or existing nodes*/
jq:
<body>
<script type="text/javascript">
//insertBefore prependTo
//Insert after appendto
$(function(){
//$('span').insertBefore($('div')).css('color','red');span insert before div
//$('div '). Insertafter ($('span'); div inserted after span
//$('div').appendTo($('span'));
// $('div').prependTo($('span'));
//All four are for the front elements of the operation
//Difference: subsequent operations have changed
// $('div '). Before ($('span'); before div is span
// $('div').after($('span')).css('color','red'); div is followed by span for the element of the first operation
});
</script>
<div>div</div>
<span>span</span>
</body>
Click change element location:
<body>
<ul>
<li>
1.
<input type="button" value="Move upward">
<input type="button" value="Move down">
</li>
<li>
2.
<input type="button" value="Move upward">
<input type="button" value="Move down">
</li>
<li>
3.
<input type="button" value="Move upward">
<input type="button" value="Move down">
</li>
<li>
4.
<input type="button" value="Move upward">
<input type="button" value="Move down">
</li>
<li>
5.
<input type="button" value="Move upward">
<input type="button" value="Move down">
</li>
</ul>
<script type="text/javascript">
$(function(){
$('input[value="Move upward"]').click(function(){
var $nowLi = $(this).closest('li');
var $preLi = $nowLi.prev();
if($preLi.length == 0){
alert('Here we are');
}else{
$nowLi.insertBefore($preLi);//$nowLi inserted in front of $preLi
}
});
$('input[value="Move down"]').click(function(){
var $nowLi = $(this).closest('li');
var $nextLi = $nowLi.next();
if($nextLi.length == 0){
alert('To the end.');
}else{
$nowLi.insertAfter($nextLi);////$nowLi inserted after $preLi
}
});
})
</script>
</body>