jQuery.append插入script正常 原生JS appendChild失效如何解决

jQuery的append()做了内置封装：传入HTML字符串时会自动完成字符串到DOM节点的解析流程，所以直接传入script标签字符串可以正常插入生效。
原生DOM API没有这层自动处理逻辑：

• appendChild()仅接受Node类型参数，直接传入字符串会抛出Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'错误
• 用createTextNode()包裹字符串插入时，内容会被作为纯文本转义，不会解析为实际DOM标签，自然无法生成有效的script节点

针对插入JSON-LD结构化数据的场景，以下两种写法都可以完美替代jQuery的append效果：

• DOMParser解析方案（通用性最优）
  先把HTML字符串解析为独立DOM片段，再提取目标节点插入，过程中不会触发脚本执行，完全适配JSON-LD的使用场景：

  if (data) {
    const parsedDoc = new DOMParser().parseFromString(data, 'text/html');
    const ldScript = parsedDoc.querySelector('script[type="application/ld+json"]');
    document.head.appendChild(ldScript);
  }
  

• 手动创建节点方案（兼容性最好）
  既然明确要插入script类型节点，可以直接创建对应元素再填充内容，适配所有主流浏览器：

  if (data) {
    const ldScript = document.createElement('script');
    ldScript.type = 'application/ld+json';
    // 剥离字符串外层的script标签，提取纯JSON内容
    ldScript.textContent = data.replace(/^\s*<script[^>]*>|<\/script>\s*$/g, '').trim();
    document.head.appendChild(ldScript);
  }
  

不要直接通过document.head.innerHTML += data的方式插入：多数浏览器不会正常识别innerHTML插入的script标签类型，且如果data来源不可控，会存在XSS注入风险。

内容的提问来源于stack exchange，提问作者Mani