Table of Contents
appendTo
<body>
<button>调用appendTo</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<div class="item">
<li>2我是第1个li</li>
<li>2我是第2个li</li>
<li>2我是第3个li</li>
</div>
</body>
元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
特点:
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
如果将页面改成:
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<div class="item1">
<li>2我是第1个li</li>
<li>2我是第2个li</li>
<li>2我是第3个li</li>
</div>
</body>
item只有一个,另一个是item1。即指定元素只有一个,多次点击按钮后,只能进行一次添加:
$("p").appendTo(".item");
console.log($("p").appendTo(".item"));
若是有两个元素就会出现(两个div.item):
由于数值太大,直接报错。
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
$("p").appendTo(".item");
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
$("p").appendTo($("div"));
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
var divs = document.querySelectorAll("div");
$("p").appendTo(divs);
appendTo(source, target) 源代码
function appendTo(source, target) {
// target.appendChild(source);
// 1.遍历取出所有指定的元素
for(var i = 0; i < target.length; i++){
var targetEle = target[i];
// 2.遍历取出所有的元素
for(var j = 0; j < source.length; j++){
var sourceEle = source[j];
// 3.判断当前是否是第0个指定的元素
if(i === 0){
// 直接添加
targetEle.appendChild(sourceEle);
}else{
// 先拷贝再添加
var temp = sourceEle.cloneNode(true);
targetEle.appendChild(temp);
}
}
}
}
var p = document.querySelector("p");
var ps = document.querySelectorAll("p");
var div = document.querySelector("div");
var divs = document.querySelectorAll("div");
appendTo(ps, divs);
执行结果:
其中cloneNode()方法:
cloneNode() 方法创建节点的拷贝,并返回该副本。
cloneNode() 方法克隆所有属性以及它们的值。
如果您需要克隆所有后代,请把 deep 参数设置 true,否则设置为 false。
console.log(p.cloneNode(true));
console.log(p.cloneNode(false));
append
<body>
<button>调用append</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<div class="item">
<li>2我是第1个li</li>
<li>2我是第2个li</li>
<li>2我是第3个li</li>
</div>
</body>
指定元素.append.元素 ==> 将元素添加到指定元素内部的最后
接受字符串:
btn.onclick = function () {
// 接收一个字符串
$("p").append(".item");
//$(".item").append("<span>我是span</span>");
}
console.log($(".item").append("p"));
接受对象:
$("div").append($("p"));
接受DOM元素:
var divs = document.querySelectorAll("div");
var ps = document.querySelectorAll("p");
$(divs).append(ps);
prependTo
<body>
<button>调用prependTo</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<div class="item">
<li>2我是第1个li</li>
<li>2我是第2个li</li>
<li>2我是第3个li</li>
</div>
</body>
接收一个字符串
$("p").prependTo(".item");
接收一个jQuery对象
$("p").prependTo($("div"));
接收一个DOM元素
var divs = document.querySelectorAll("div");
$("p").prependTo(divs);
console.log($("p").prependTo(".item"));
prependTo源码
function prependTo(source, target) {
//调用者.insertBefore(插入的元素, 参考的元素);
//insertBefore方法, 调用者是谁就会将元素插入到谁里面
target.insertBefore(source, target.firstChild);
}
var p = document.querySelector("p");
var div = document.querySelector("div");
prependTo(div,p);
prepend
与append方法相反:将元素添加到指定元素内部的最前面
接收一个字符串:
$(".item").prepend("<span>我是span</span>");
接收一个jQuery对象
$("p").prepend($("div"));
接收一个DOM元素:
var divs = document.querySelectorAll("div");
var ps = document.querySelectorAll("p");
$(ps).prepend(divs);
insertBefore
指定元素 ==>将元素添加到指定元素外部的前面
接收一个字符串
$("p").insertBefore(".item");
接收一个jQuery对象
$("p").insertBefore($("div"));
接收一个DOM元素
var divs = document.querySelectorAll("div");
$("p").insertBefore(divs);
console.log($("p").insertBefore(".item"));
insertBefore源码
function insertBefore(source, target) {
/*
调用者.insertBefore(插入的元素, 参考的元素);
insertBefore方法, 调用者是谁就会将元素插入到谁里面
*/
// 1.拿到指定元素的父元素
var parent = target.parentNode;
// 2.利用指定元素的父元素来调用insertBefore方法
parent.insertBefore(source, target);
}
var p = document.querySelector("p");
var div = document.querySelector("div");
insertBefore(p,div);
利用指定元素的父元素来调用insertBefore方法!!!
换一下顺序就不能执行:
insertBefore(div,p);
其他
function replaceAll(source, target) {
// 1.将元素插入到指定元素的前面
$(source).insertBefore(target);
// 2.将指定元素删除
$(target).remove();
}
.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面
元素.replaceAll.指定元素 ==> 替换所有指定元素
clone ==> 复制节点(true深复制,false浅复制)
详细可见博客:Mr.J-- jQuery学习笔记(二十)--节点操作方法