提问者:小点点

html GET呈现在代码元素而不是字符串内部


我想为我的组件自动生成一个html预览,但是我的html呈现为一个节点,而不是显示一个字符串...

这是我的简化示例

null

const btns = document.querySelectorAll('.preview')
const previewContainer = document.getElementById('previewContainer')

const pre = document.createElement('pre')
previewContainer.appendChild(pre)

btns.forEach((btn)=> {
  const code = document.createElement('code')
  pre.appendChild(code)
  code.innerHTML = btn.outerHTML
  console.log(typeof btn.outerHTML)
})
<button class="preview">label1</button>
<button class="preview">label2</button>
<div id="previewContainer"></div>

null

还创建了一个代码页


共2个答案

匿名用户

使用textContent而不是innerHTML

我不使用innerText是因为

不要被Node.TextContent和HtmlElement.InnerText之间的差异所迷惑。虽然名字看似相似,但有重要区别:

textContent获取所有元素的内容,包括