javascript 动态创建并插入 html 元素需两步：先用 createelement() 创建元素并设置属性、内容、样式等，再用 appendchild()、insertbefore() 或 replacechild() 等方法插入到指定位置；批量操作推荐使用 documentfragment 提升性能。
用 JavaScript 动态创建并插入 HTML 元素，核心是两步：先用 document.createElement() 创建元素，再用 appendChild()、insertBefore() 或 innerHTML 等方法把它加到页面中。
创建元素并设置基本属性
用 createElement() 生成新节点，然后通过属性或方法设置内容、类名、ID、样式等：
-
创建元素：
const div = document.createElement('div'); -
设文本内容：
div.textContent = 'Hello World';（推荐，防 XSS）或div.innerHTML = '<strong>Hi</strong>';（支持 HTML，但需确保内容可信） -
设属性：
div.id = 'myDiv';、div.className = 'box active';、div.style.color = 'blue';
插入到页面的常见方式
插入位置不同，方法也不同。最常用的是追加到末尾或插入到指定位置：
-
追加到父容器末尾：
document.body.appendChild(div);或container.appendChild(div); -
插入到某个子元素前面：
parent.insertBefore(newEl, referenceEl);（例如插在第一个子元素前：parent.insertBefore(div, parent.firstChild);） -
替换某个现有元素：
oldEl.parentNode.replaceChild(newEl, oldEl); -
用 innerHTML 追加（不推荐频繁使用）：
container.innerHTML += '<p>New paragraph</p>';—— 会重绘整个 innerHTML，性能差且清空事件监听器
批量插入与文档片段优化
如果一次要插入多个元素，直接多次 appendChild() 可能触发多次重排，影响性能。建议用 DocumentFragment 缓存后再插入：
const frag = document.createDocumentFragment();for (let i = 0; i-
container.appendChild(frag);—— 只触发一次 DOM 更新
完整小例子：动态添加一个带按钮的卡片
// 创建卡片容器const card = document.createElement('article');card.className = 'card';card.innerHTML = `<h3>动态卡片</h3>
<p>这是 JS 创建的。</p>`;
// 创建删除按钮并绑定点击逻辑const btn = document.createElement('button');btn.textContent = '删除';btn.onclick = () => card.remove();card.appendChild(btn);
// 插入到 body 最后document.body.appendChild(card);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
