jQuery prepend()传入HTML字符串被字符串化，导致标签显示为文本而非渲染按钮的问题

你遇到的这个问题我之前也碰到过——明明写了正确的HTML字符串，结果页面上却直接显示成了文本，完全没有渲染成可点击的按钮。先看看你的原代码：

sections=$("section"); 
for(let i=0; i<sections.length; i++){ 
  let sectionTempCode=("<button id='").concat(i.toString()).concat("'>Toggle section view</button>"); 
  console.log(sectionTempCode) 
  sections[i].prepend(sectionTempCode) 
}

问题根源 #

你已经摸到了关键点，但还有个细节需要明确：当你通过sections[i]获取元素时，拿到的是原生DOM节点，而不是jQuery对象。原生DOM的prepend()方法如果接收字符串参数，会直接把它当作文本节点插入到页面中，不会解析成HTML元素——这就是为什么你看到的是<button id='0'>Toggle section view</button>这样的纯文本，而不是按钮。

两种解决方案 #

方案1：用jQuery的遍历和prepend方法（最贴合你的原始思路）

既然你一开始用了jQuery，不如全程用jQuery的方法来处理，这样能自动帮你解析HTML字符串：

const sections = $("section");
sections.each(function(index) {
  // 用模板字符串拼接HTML，比concat()更简洁易读
  const buttonHtml = `<button id='${index}'>Toggle section view</button>`;
  // $(this)是当前的section jQuery对象，调用jQuery的prepend会自动解析HTML
  $(this).prepend(buttonHtml);
});

这里用each()遍历jQuery集合，每个循环里的$(this)都是jQuery包装后的section元素，调用jQuery版本的prepend()时，它会自动把HTML字符串转换成对应的DOM元素再插入，自然就能渲染出可交互的按钮了。

方案2：用原生DOM方法创建元素（更安全、更原生）

如果你想脱离jQuery，直接用原生API的话，推荐直接创建DOM元素而不是拼接字符串，这样既避免了文本解析问题，还能降低XSS风险（如果按钮内容涉及用户输入的话）：

const sections = document.querySelectorAll("section");
for(let i = 0; i < sections.length; i++) {
  const button = document.createElement("button");
  button.id = i.toString();
  button.textContent = "Toggle section view";
  sections[i].prepend(button);
}

这种方式直接创建<button>元素，设置好属性和文本后再插入到section里，原生prepend()接收DOM元素时会正确渲染出按钮。

总结 #

核心差异就在这里：原生DOM的prepend()处理字符串时是文本，jQuery的prepend()会解析HTML。你的原代码因为操作了原生DOM节点，才导致了文本显示的问题，换成上面两种方法就能解决啦。

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