我想为我的组件自动生成一个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
还创建了一个代码页
使用textContent而不是innerHTML
我不使用innerText是因为
不要被Node.TextContent和HtmlElement.InnerText之间的差异所迷惑。虽然名字看似相似,但有重要区别:
textContent获取所有元素的内容,包括和
元素。相比之下,innerText只显示“人类可读的”元素。
textContent返回节点中的每个元素。相比之下,innerText知道样式,不会返回“隐藏”元素的文本。
此外,由于innerText将CSS样式考虑在内,读取innerText的值将触发回流,以确保计算出的样式是最新的。(回流可能在计算上很昂贵,因此应尽可能避免。)
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.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>
使用innerText而不是innerHTML
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.innerText = btn.outerHTML
console.log(typeof btn.outerHTML)
})
<button class="preview">label1</button>
<button class="preview">label2</button>
<div id="previewContainer"></div>