如何在指定td元素后新增td？调用after()插入内容显示为文本怎么办

Element.after() 方法接收字符串参数时，会自动将传入内容转义为纯文本节点插入，不会对字符串里的HTML标签做解析，这就是你看到新增的td标签直接以文本形式展示在页面上的根本原因。

你可以任选以下两种方式实现需求：

• 方案1：先创建DOM元素节点，再插入到目标位置
  如果涉及跨iframe/父页面操作，创建节点时要使用对应上下文的document对象，避免节点归属错误：

  const parentDoc = parent.document;
  const firstTd = parentDoc.getElementById("currentTd");
  // 创建td节点
  const newTd = parentDoc.createElement("td");
  // 填充td内部内容
  newTd.innerHTML = "<span>teste</span>";
  // 插入到目标td后方
  firstTd.after(newTd);
  

• 方案2：使用支持HTML字符串解析的插入API
  用insertAdjacentHTML()方法可以直接传入HTML字符串，指定插入位置为目标元素后方即可，不需要单独创建节点：

  const firstTd = parent.document.getElementById("currentTd");
  // 第一个参数'afterend'表示插入到当前元素自身的后面位置
  firstTd.insertAdjacentHTML("afterend", '<td><span>teste</span></td>');
  

注意：插入td元素时要保证目标td的父节点是tr元素，否则会出现表格结构不符合规范的渲染异常。

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