html get 在代码元素中呈现而不是字符串

问题描述

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

这是我的简化示例

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>

还创建了一个 codepen

解决方法

使用 innerText 代替 innerHTML

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.innerText = btn.outerHTML
  console.log(typeof btn.outerHTML)
})

<button class="preview">label1</button>
<button class="preview">label2</button>
<div id="previewContainer"></div>

.innerHTML 将字符串解析为 HTML。 .innerText 将其保留为字符串并附加字符串而不是 HTML

,

使用 textContent 代替 innerHTML

我不使用innerText，因为

不要对 Node.textContent 和 HTMLElement.innerText 之间的差异感到困惑。虽然名字看起来很相似，但还是有重要的区别：

textContent 获取所有元素的内容，包括 <script> 和 <style> 元素。相比之下，innerText 只显示“人类可读”的元素。

textContent 返回节点中的每个元素。相比之下，innerText 知道样式并且不会返回“隐藏”元素的文本。

此外，由于innerText 考虑了CSS 样式，读取innerText 的值会触发回流以确保最新的计算样式。 （回流在计算上可能很昂贵，因此应尽可能避免。）

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.textContent = btn.outerHTML; // show the code as text
  console.log(typeof btn.outerHTML)
})

<button class="preview">label1</button>
<button class="preview">label2</button>
<div id="previewContainer"></div>