如果是往数组中插入数据，直接用push()和unshift()方法，《js数组常用方法归类》这篇文章有详细讲解。本篇文章主要是针对节点的插入。

一、插入到父元素内部

1. 插入到所有子节点的末尾。

appendChild() —— 经典方法。只能插入一个节点。

const parent = document.getElementById('parent');

const child = document.createElement('div');

parent.appendChild(child);

append() —— 现代方法，推荐！支持插入多个节点或文本。

const parent = document.querySelector('.parent');

const div = document.createElement('div');

const span = document.createElement('span');

parent.append(div, span, 'Hello World'); // 插入两个元素 + 文本

2. 插入到所有子节点的开头

prepend() —— 现代方法，推荐！与append()一样，也可插入多个节点或文本。

const parent = document.getElementById('parent');

const div = document.createElement('div');

const span = document.createElement('span');

parent.prepend(div, span);

span.prepend('标题：');

3. 插入到指定子节点前

insertBefore() —— 经典方法。跟appendChild()一样，同样只能插入一个节点。

const parent = document.getElementById('parent');

const newChild = document.createElement('div');

parent.insertBefore(newChild, parent.children[0]); // 插入到 referenceNode 之前

二、插入到兄弟节点前后

before() —— 插入到某个元素之前

after() —— 插入到某个元素之后

const existingNode = document.getElementById('existing');

const newNode = document.createElement('div');

existingNode.before(newNode); // 在 existingNode 前插入

existingNode.after('Text after'); // 在 existingNode 后插入文本

三、精确控制插入位置（insertAdjacent 系列）

1.  insertAdjacentElement() —— 在目标元素的指定位置插入 一个元素节点：

语法

targetElement.insertAdjacentElement(position, element);

position 可选值：

'beforebegin'：在目标元素之前（作为兄弟节点）。

'afterend'：在目标元素之后（作为兄弟节点）。

'afterbegin'：在目标元素内部开头。

'beforeend'：在目标元素内部末尾（类似 append）。

const parent = document.getElementById('parent');

const child = document.createElement('div');

parent.insertAdjacentElement('beforeend', child); // 相当于 append

2. insertAdjacentHTML() —— 插入 HTML 字符串，自动解析为 DOM。

target.insertAdjacentHTML('beforeend', '<div>New</div>');

3.  insertAdjacentText() —— 插入 纯文本，不解析为 DOM。

target.insertAdjacentText('beforeend', 'Plain text');

总结实践建议：

需要在元素前后插入时，优先使用现代 API（append()/prepend()/before()/after()）。代码更简洁，支持多节点和文本。

需要精准定位时用 insertAdjacentElement()。