JavaScript 中 createElement 怎么动态创建全新的 DOM 节点元素-js教程-PHP中文网

createelement是javascript中创建空白dom元素节点的方法，需手动设置属性、内容并插入文档才能显示；支持单个创建、属性配置、事件绑定及多种插入方式，推荐textcontent防xss。

javascript 中 createelement 怎么动态创建全新的 dom 节点元素

createElement 是 JavaScript 中用于动态创建全新 DOM 元素节点的核心方法，它返回一个指定标签名的空元素对象，尚未插入页面，需手动添加到文档中才能显示。

基本用法：创建单个元素

调用 document.createElement(tagName) 即可生成对应标签的元素节点。tagName 是字符串（如 "div"、"p"、"section"），不带尖括号。

let box = document.createElement("div"); → 创建一个空的 <div></div>
let btn = document.createElement("button"); → 创建一个 <button></button>
注意：不能传入完整 HTML 字符串（如 "
text
"），那要用 innerHTML 或 insertAdjacentHTML

设置属性和内容

新创建的元素是“干净”的，需单独设置 class、id、文本、事件等：

java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时，应调用此技能：构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问（JPA / MyBatis）、处理认证与授权（Spring Security / JWT）、实现微服务架构（Spring Cloud）、排查 Spring Boot 相关错误、审查 Java 代码质量，或执行任何与 Spring Boot / Java 后端相关的任务。

下载

box.className = "card"; 或 box.setAttribute("class", "card");
box.id = "main-box";
box.textContent = "这是动态内容";（推荐，防 XSS）或 box.innerHTML = "加粗文本";
btn.addEventListener("click", () => alert("点到了"));

插入到页面中

创建后必须挂载到真实 DOM 才可见。常用插入方法：

document.body.appendChild(box); → 添加到最后
container.insertBefore(box, refNode); → 插入到 refNode 前面
container.prepend(box); 或 container.append(box); → 更现代的写法

批量创建与嵌套结构

可链式创建父子关系，再统一插入，提升性能：

let list = document.createElement("ul");
for (let i = 0; i   let item = document.createElement("li");
  item.textContent = `第 ${i + 1} 项`;
  list.appendChild(item);
}
document.getElementById("root").append(list);

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南