ノードを挿入する方法はまったく難しいことではありませんが、覚えていないか、明確に区別されていないことが多いため、これらの方法の使用にすでに習熟している、または習熟していることを前提としています。
この記事は、両者の違いを要約することを目的としています。それら、および使用法は詳細に紹介されません。

注：before＆insertBefore、after＆insertAfterターゲットノードと操作ノードの関係は「兄弟関係」である必要がありますが、「親子関係」の説明は、プライマリとセカンダリの関係をより適切に表現できると思います。

javascript

appendChild

Parent.appendChild（子）

挿入位置：親ノードの最後の位置

insertBefore

父.insertBefore（子、未定義）
父.insertBefore（子、父.children [2]）

挿入位置：2番目のパラメーターは親ノードの子ノードに渡され、最後にその子ノードの前に挿入され
ます。2番目のパラメーターは[undefined、null]で、最後に親ノードの最後の位置に挿入されます（ appendChildと同じ）

jquery

before＆insertBefore

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

挿入位置：親ノードの前

prepend＆prependTo

$（parent）.prepend（child）
$（child）.prependTo（parent）

挿入位置：親ノードの最初の位置

append＆appendTo

$（parent）.append（child）
$（child）.appendTo（parent）

挿入位置：親ノードの最後の位置（appendChildと同じ）

after＆insertAfter

$（parent）.after（child）
$（child）.insertAfter（parent）

挿入位置：親ノードの後ろ

上記の方法の共通機能

ドキュメントに子ノードが存在する場合、子ノードは元の位置から新しい位置に移動されます。つまり、上記の方法は実際には[コピー]ではなく[移動]です。
子ノードを返し、jsはjs形式を返し、jqはjq形式を返します

挿入位置図は次のとおりです

ここに画像の説明を挿入

デモ

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

デモのコードを実行してセクションごとに比較すると、上記の方法の違いを簡単に明確にすることができます

終わり

javascriptjqueryノードメソッドリストの挿入