通过设置 dom 节点的 innerhtml 属性，可以将 html 字符串解析并插入到该节点内部。只需将包含标签的字符串赋值给目标元素的 innerhtml，浏览器会自动创建对应的 dom 子节点。如果字符串中包含脚本标签，脚本通常会被执行；若需避免安全风险或重复渲染开销，应确保传入的是合法的 html 片段。
如何向指定元素追加 HTML 内容
要向特定元素追加 HTML 内容，直接访问该元素的 innerHTML 属性并赋予新字符串即可。此操作会替换原有内容，因此若要保留旧内容，需先读取再拼接，或直接使用 insertAdjacentHTML。这里演示最直接的覆盖式插入，适用于初始化或完全刷新某区域内容的场景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InnerHTML Insertion</title>
</head>
<body>
<div id="container"></div>
<script>
// 获取目标节点
const container = document.getElementById('container');
// 定义要插入的 HTML 字符串
const htmlString = '<h2>标题</h2><p>这是一段文本。</p><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>';
// 执行插入操作
container.innerHTML = htmlString;
// 验证结果：检查子节点数量和内容
console.log('Child count:', container.children.length);
console.log('First child tag:', container.firstElementChild.tagName);
</script>
</body>
</html>运行上述代码后，container 元素内将包含一个 H2 和一个 P 元素。children.length 输出为 2，firstElementChild.tagName 输出为 H2。这证实了字符串被正确解析为 DOM 节点。
插入 HTML 时脚本标签的执行行为
当插入的 HTML 字符串中包含 <script></script> 标签时，浏览器的处理行为取决于脚本的来源和类型。对于内联脚本（即 <script>...</script>），现代浏览器出于安全考虑，通常不会自动执行通过 innerHTML 动态插入的内联脚本块。如果需要执行动态脚本，必须手动创建 <script></script> 元素并设置其 text 或 src 属性，然后将其添加到 DOM 中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script Execution Test</title>
</head>
<body>
<div id="target"></div>
<button id="btn">Insert Script</button>
<script>
const target = document.getElementById('target');
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
// 尝试通过 innerHTML 插入内联脚本
const scriptHtml = '<script>alert("Inline from innerHTML");</script>';
target.innerHTML = scriptHtml;
// 尝试通过 innerHTML 插入外部脚本引用
const externalScriptHtml = '<script src="https://example.com/lib.js"></script>';
target.innerHTML += externalScriptHtml;
});
</script>
</body>
</html>点击按钮后，内联的 alert 不会弹出，因为 innerHTML 注入的内联脚本默认不执行。外部脚本引用可能会被加载，但具体行为受 CSP 策略影响。若需执行逻辑，应手动创建脚本节点：const s = document.createElement('script'); s.text = 'console.log(1);'; target.appendChild(s);。
基于插入空字符串时的清空行为
当向 innerHTML 赋值空字符串 '' 时，该节点内的所有子节点都会被移除，相当于清空该元素的内容。这一行为常用于重置表单、清除列表或隐藏内容而不删除 DOM 节点本身。与 textContent = '' 不同，innerHTML = '' 也会触发重排，并移除绑定的事件监听器（如果是通过属性绑定或某些框架方式）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear InnerHTML</title>
</head>
<body>
<div id="box"><span>Content</span></div>
<button id="clearBtn">Clear</button>
<script>
const box = document.getElementById('box');
const clearBtn = document.getElementById('clearBtn');
clearBtn.addEventListener('click', () => {
// 清空内容
box.innerHTML = '';
console.log('Box content after clear:', box.innerHTML);
console.log('Children count:', box.children.length);
});
</script>
</body>
</html>点击清空按钮后，box.innerHTML 变为空字符串，children.length 变为 0。原有的 SPAN 元素及其内容被彻底移除。这是实现“清空”功能最直接的方式之一。
