javascript jquery 插入节点方法一览

最新推荐文章于 2023-03-14 12:35:19 发布

352328759

最新推荐文章于 2023-03-14 12:35:19 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript 介绍

本文链接：https://blog.csdn.net/u013970232/article/details/110877354

版权

JavaScript 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

介绍

36 篇文章 0 订阅

订阅专栏

插入节点的方法一点都不难, 就是经常记不住, 或者分不清, 所以假定你已经熟练甚至精通这些方法的使用
本篇旨在总结它们的差别, 用法就不详细介绍了

注: before & insertBefore, after & insertAfter 目标节点和操作节点的关系应该是"兄弟关系", 但我觉得以"父子关系"描述更能表达它们的主次关系

javascript

appendChild

父.appendChild(子)

插入位置: 父节点里的最后位置

insertBefore

父.insertBefore(子, undefined)
父.insertBefore(子, 父.children[2])

插入位置: 第二个参数传入父节点的某个子节点, 最终插入到那个子节点的前面;
第二个参数可以为 [undefined, null], 最终插入到父节点里的最后位置(同 appendChild)

jquery

before & insertBefore

$(父).before(子)
$(子).insertBefore(父)

插入位置: 父节点外的前面

prepend & prependTo

$(父).prepend(子)
$(子).prependTo(父)

插入位置: 父节点里的最前位置

append & appendTo

$(父).append(子)
$(子).appendTo(父)

插入位置: 父节点里的最后位置(同 appendChild)

after & insertAfter

$(父).after(子)
$(子).insertAfter(父)

插入位置: 父节点外的后面

以上方法共同特性

如果子节点存在于文档, 子节点会从原位置移动到新位置. 就是说以上方法其实是[移动]而不是[复制]
都会返回子节点, js 返回 js 格式, jq 返回 jq 格式

插入位置图解如下

在这里插入图片描述

demo

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>javascript jquery 插入节点方法一览</title>
	<style>
		* { padding: 20px; }
		div { outline: green 1px solid; }
		div::before { content: "目标父节点"; }
		ul { outline: red 1px solid; list-style-type: none; }
		ul::before { content: "目标节点"; }
		li { outline: blue 1px solid; list-style-type: none; }
		li::marker { outline: blue 1px solid; }
		li::before { content: "目标子节点"; }
		div, ul, li { position: relative; }
		div::before, ul::before, li::before { display: block; font-size: 12px; position: absolute; top: 0; right: 0; background-color: salmon; }
	</style>
</head>

<body>

	<div>
		<ul id="ul">
			<li>原有项</li>
			<li>原有项</li>
			<li>原有项</li>
		</ul>
	</div>

	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
	<script type="text/javascript">
		"use strict"

		window.onload = function (params) {
			var _ul = document.getElementById("ul")

			//

			var _innerHTML = document.createElement("li")
			_innerHTML.innerHTML = "appendChild"
			_ul.appendChild(_innerHTML)

			//

			var _insertBefore = document.createElement("li")
			_insertBefore.innerHTML = "insertBefore"
			_ul.insertBefore(_insertBefore, undefined)

			var _insertBefore2 = document.createElement("li")
			_insertBefore2.innerHTML = "insertBefore 指定到第2项的前面"
			_ul.insertBefore(_insertBefore2, _ul.children[2])

			//

			var _before = document.createElement("li")
			_before.innerHTML = "$.before"
			$("#ul").before(_before)

			var _insertBefore = document.createElement("li")
			_insertBefore.innerHTML = "$.insertBefore"
			$(_insertBefore).insertBefore("#ul")

			//

			var _prepend = document.createElement("li")
			_prepend.innerHTML = "$.prepend"
			$("#ul").prepend(_prepend)

			var _prependTo = document.createElement("li")
			_prependTo.innerHTML = "$.prependTo"
			$(_prependTo).prependTo("#ul")

			//

			var _append = document.createElement("li")
			_append.innerHTML = "$.append"
			$("#ul").append(_append)

			var _appendTo = document.createElement("li")
			_appendTo.innerHTML = "$.appendTo"
			$(_appendTo).appendTo("#ul")

			//

			var _after = document.createElement("li")
			_after.innerHTML = "$.after"
			$("#ul").after(_after)

			var _insertAfter = document.createElement("li")
			_insertAfter.innerHTML = "$.insertAfter"
			$(_insertAfter).insertAfter("#ul")

		}
	</script>
</body>

</html>

将 demo 中的代码一段段执行, 比较, 很容易就能厘清以上方法的差异了

end

352328759

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript jquery 插入节点方法一览

插入节点的方法一点都不难, 就是经常记不住, 或者分不清, 所以假定你已经熟练甚至精通这些方法的使用本篇旨在总结它们的差别, 用法就不详细介绍了注: before & insertBefore, after & insertAfter 目标节点和操作节点的关系应该是"兄弟关系", 但我觉得以"父子关系"描述更能表达它们的主次关系javascriptappendChild父.appendChild(子)插入位置: 父节点里的最后位置insertBefore父.insertB
复制链接

扫一扫