点击元素获取p标签内a标签返回[object HTML] 如何显示标签本身文本

直接将DOM元素对象赋值给innerHTML属性时，JavaScript会自动调用对象的toString()方法做类型转换，最终得到的就是[object HTMLXXXElement]格式的字符串，无法输出元素本身的HTML代码文本。

要获取元素包含自身标签在内的完整HTML源码，调用DOM元素的outerHTML属性即可。如果需要将HTML代码作为纯文本原样展示、不被浏览器解析为实际页面元素，推荐使用textContent属性赋值，同时可以避免XSS安全风险。

修复后的完整代码如下：

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    // 获取元素完整HTML字符串
    var targetHtmlCode = target.outerHTML;
    // 赋值给p标签，纯文本展示
    document.querySelector(".html-tag-element-picker").textContent = targetHtmlCode;
}, false);

如果只需要展示标签名不需要内部内容，可以自行拼接字符串实现：

// 输出格式为 <div> 这类仅标签的内容
var targetTag = `<${target.tagName.toLowerCase()}>`;

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