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

最新推荐文章于 2019-12-10 14:17:13 发布

End_less__

最新推荐文章于 2019-12-10 14:17:13 发布

阅读量251

点赞数

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/94175982

版权

jQuery学习专栏收录该内容

33 篇文章 3 订阅

订阅专栏

本文详细介绍了jQuery中的DOM操作方法，包括appendTo、append、prependTo、prepend和insertBefore等，讲解了它们的使用方式和特点，如元素的添加位置、字符串、jQuery对象和DOM元素的处理，以及cloneNode等方法的应用。

摘要由CSDN通过智能技术生成

Table of Contents

appendTo

appendTo(source, target) 源代码

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学习笔记(二十)--节点操作方法

End_less__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)

appendTo<body><button>调用appendTo</button><p>我是段落</p><p>我是段落</p><div class="item"> <li>1我是第1个li</li> <li>1我是第2个li<...
复制链接

扫一扫

专栏目录