JavaScript打印完整HTML标签及innerHTML赋值渲染异常问题咨询

问题1：如何打印完整HTML标签源码，而非渲染后的可交互元素 #

要输出完整的标签代码文本（例如完整的<a href="link">text</a>字符串，而不是页面上渲染的可点击链接），核心是不要直接操作DOM对象插入，按需求选择对应方法：

• 若需要在控制台打印完整标签字符串：直接读取DOM元素的outerHTML属性打印即可，该属性会返回包含元素自身标签、所有属性、所有子节点的完整HTML序列化字符串。
• 若需要在页面中以纯文本形式展示标签代码（不被浏览器解析渲染）：将标签字符串赋值给目标元素的textContent属性，不要使用innerHTML，textContent会把所有内容作为纯文本处理，不会解析HTML标签。

问题2：DOM元素赋值给innerHTML时仅显示href值的原因 #

核心原因 #

innerHTML属性仅接受字符串类型的赋值。当你把通过getElementsByTagName('a')[0]获取到的DOM对象（类型为HTMLAnchorElement，是一个JS对象而非字符串）直接赋值给innerHTML时，浏览器会触发隐式类型转换，自动调用该DOM对象的toString()方法将其转为字符串。
而锚点元素的toString()方法默认返回值就是元素href属性的完整链接地址，这就是最终段落内只显示链接地址，既没有插入完整锚点标签、也没有显示hello world文本的根本原因。

补充说明：执行console.log(x)时能看到完整锚点标签，是浏览器控制台对DOM对象做的特殊交互式预览效果，不代表x本身是HTML字符串，不要混淆控制台展示效果和值的实际类型。

对应需求的正确实现 #

根据不同预期效果，选择对应的正确写法：

• 如果你想把原锚点元素移动到段落内部保留链接效果：使用DOM节点操作方法，不要用innerHTML

  document.getElementById('demo').appendChild(x);
  

• 如果你只想在段落内显示锚点的文本内容hello world，不需要链接效果：读取元素的文本内容赋值

  document.getElementById('demo').textContent = x.textContent;
  

• 如果你想在段落内插入一个和原锚点完全一致的可点击链接（复制一份新的锚点，不移动原元素）：给innerHTML赋值元素的序列化HTML字符串

  document.getElementById('demo').innerHTML = x.outerHTML;
  

问题复现代码 #

const x = document.getElementsByTagName('a')[0];
console.log(x);
// 控制台输出DOM元素的交互式预览，并非HTML字符串
document.getElementById('demo').innerHTML = x;
// 触发隐式类型转换，实际等价于赋值x.toString()，即href属性值

<!DOCTYPE html>
<html>
<body>
  <a href="https://www.example.com/html/">hello world</a>
  <a href="https://www.example.com/css/">Welcome</a>
  <p id="demo"></p>
</body>
</html>

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