JavaScript DOM 操作怎么动态创建并插入一个新元素-js教程-PHP中文网

动态创建并插入新元素分三步：创建元素、设置内容或属性、挂载到页面；用 createelement() 创建节点后需配置再插入，注意目标父元素存在性与插入时机。

javascript dom 操作怎么动态创建并插入一个新元素

动态创建并插入新元素，核心是三步：创建元素、设置内容或属性、挂载到页面中。关键在于选对插入位置和时机。

用 document.createElement() 创建元素

这是最基础的创建方式，传入标签名字符串即可生成对应 DOM 节点：

let div = document.createElement('div');
let p = document.createElement('p');
创建后它只是内存中的节点，尚未出现在页面上，也没有父元素（parentNode 为 null）

设置内容和属性再插入

创建后通常要配置内容或特性，再选择合适方法插入：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

填文本：p.textContent = 'Hello World';（推荐，防 XSS）或 p.innerHTML = 'styled text';
设属性：div.id = 'my-box'; 或 div.setAttribute('class', 'container');
插入到某个现有元素内：
document.body.appendChild(p); → 插到末尾
header.insertBefore(div, header.firstChild); → 插到开头
list.insertAdjacentElement('beforeend', li); → 插到 list 内部最后

一行写法：创建 + 设置 + 插入（常用简写）

实际开发中常链式组合，提升可读性与效率：

const btn = Object.assign(document.createElement('button'), {textContent: '点击', className: 'btn'});
document.querySelector('#app').appendChild(btn);
或用模板字符串配合 insertAdjacentHTML（适合含 HTML 结构）：
container.insertAdjacentHTML('beforeend', '已加载');