为什么JavaScript点击按钮后显示HTML代码而非渲染对应内容？

API 探路者

2026-10-2

问题原因

你使用了document.createTextNode()方法插入内容，该方法的核心特性是将所有传入内容当作纯文本处理，不会对内部的HTML标签做解析渲染，因此你写的标签代码会直接以源码形式展示。
同时你定义的内容字符串中使用了<、>这类HTML转义实体，就算使用支持解析HTML的方法，也会因为转义字符的存在无法正常渲染标签。

解决方法

可以直接使用innerHTML属性插入HTML内容，修改后的JS代码如下：

let btn = $('button');
let socials = $("#popup");
let theDiv = document.getElementById("btnclick");

btn.click(function() {
  socials.toggle();
  // 替换转义实体为正常的标签符号，用innerHTML插入可自动解析HTML
  theDiv.innerHTML = '<button class="circle"><img class="share" src="images/icon-share.svg"></button>';
});

如果你想沿用jQuery的写法，也可以用jQuery提供的append()方法，代码更简洁：

let btn = $('button');
let socials = $("#popup");

btn.click(function() {
  socials.toggle();
  $("#btnclick").append('<button class="circle"><img class="share" src="images/icon-share.svg"></button>');
});