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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a> <p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</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);
