The method of inserting a node is not difficult at all, but it is often not remembered or not clearly distinguished, so it is assumed that you are already proficient or even proficient in the use of these methods.
This article aims to summarize the differences between them, and the usage will not be introduced in detail.

Note: before & insertBefore, after & insertAfter The relationship between the target node and the operation node should be a "sibling relationship", but I think the "parent-child relationship" description can better express their primary and secondary relationship

javascript

appendChild

Parent.appendChild(child)

Insertion position: the last position in the parent node

insertBefore

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

Insertion position: The second parameter is passed into a child node of the parent node, and finally inserted in front of that child node; the
second parameter can be [undefined, null], and finally inserted into the last position in the parent node (same as appendChild)

jquery

before & insertBefore

$ (Father) .before (child)
$ (child) .insertBefore (father)

Insertion position: in front of the parent node

prepend & prependTo

$(parent).prepend(child)
$(child).prependTo(parent)

Insertion position: the first position in the parent node

append & appendTo

$(parent).append(child)
$(child).appendTo(parent)

Insertion position: the last position in the parent node (same as appendChild)

after & insertAfter

$(parent).after(child)
$(child).insertAfter(parent)

Insertion position: behind the parent node

Common features of the above methods

If the child node exists in the document, the child node will be moved from the original position to the new position. This means that the above method is actually [move] instead of [copy]
Will return child nodes, js returns js format, jq returns jq format

The insert position diagram is as follows

Insert picture description here

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>

Execute and compare the code in the demo section by section, it is easy to clarify the difference between the above methods

end

javascript jquery insert node method list