700字范文 > Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)

Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)

时间：2023-10-31 16:08:15

Table of Contents

appendTo

appendTo(source, target) 源代码

append

prependTo

prependTo源码

prepend

insertBefore

insertBefore源码

其他

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);