JavaScript Academy · 课时

创建和插入元素

Q: 「创建和插入元素」这节课中我会学到什么？

使用 createElement 和 append 创建新节点。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 createElement 和 append 创建新节点。

第 2 / 4 课13 个步骤

创建和插入元素 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

构建新元素

除了编写 HTML 字符串，您还可以在代码中构造元素。这样可以避免 XSS，并获得一个真正的元素引用来进行配置。

createElement

document.createElement 会创建一个新的、尚未连接的元素。它存在于内存中，但还没有出现在页面里。

const li = document.createElement("li");
li.textContent = "New item";

插入前进行配置

在元素仍处于脱离状态时设置类、属性和内容。只有将它插入后，它才会显示出来。

const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";

append

append 会将节点（或字符串）添加为元素的最后子节点。它可以接受多个参数。

const list = document.querySelector("ul");
list.append(li);

prepend

prepend 会将节点插入为第一个子节点，并将现有子节点向后推移。

list.prepend(document.createElement("li"));

append 接受字符串

与较早的 appendChild 不同，append 可以一次接受普通字符串和多个参数。

const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");

appendChild

appendChild 是经典方法。它只能接受一个节点并返回该节点，而 append 返回 undefined。

const node = list.appendChild(document.createElement("li"));

insertBefore

insertBefore 会将新节点放置在指定的现有子节点之前，从而实现精确定位。

const ref = list.children[1];
list.insertBefore(li, ref);

insertAdjacentElement

insertAdjacentElement 会根据元素的相对位置插入内容，例如元素开始标签之前、开始标签之后、结束标签之前和结束标签之后。

ref.insertAdjacentElement("beforebegin", li);

使用 DocumentFragment 批量插入

添加许多元素时，先在 DocumentFragment 中构建它们，然后一次性插入。这样可以最大限度地减少重排，速度也更快。

const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Row " + i;
  frag.append(item);
}
list.append(frag);

cloneNode

cloneNode(true) 会复制一个元素及其后代，适合用于创建重复结构的模板。

const copy = li.cloneNode(true);
list.append(copy);

快速检查

请选择最佳技术。

在交互式课程中回答

回顾

使用 createElement 构建脱离文档的元素，配置完成后，再使用 append/prepend（允许字符串和多个参数）、appendChild（单个节点）或 insertBefore/insertAdjacentElement（用于精确定位）插入。批量插入许多元素时使用 DocumentFragment，并通过 cloneNode(true) 重用结构。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 59
课程: 200

免费开始学习查看完整课程

常见问题解答

「创建和插入元素」课时是免费的吗？

是的 — 「创建和插入元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「创建和插入元素」这节课中我会学到什么？

使用 createElement 和 append 创建新节点。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「创建和插入元素」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy