<script> 的内部元素无法被文档识别
Posted
技术标签:
【中文标题】<script> 的内部元素无法被文档识别【英文标题】：inner element of <script> not recognized by document 【发布时间】：2021-10-13 15:02:42 【问题描述】：我有一个模板 <script> 标签，其中包含一些 html 代码和
我想用 JS 脚本替换 label 文本。
<script type="text/template" id="element">
<body>
<label id="sub-element">Replace me</label>
</body>
</script>
在它之后，我有一些 javascript：
<script>
let str = "Some text";
</script>
最好的方法是什么？
我尝试过使用document.getElementById("sub-element").innerHTML，但它没有做任何事情。
谢谢
【问题讨论】：
为什么不使用<template> 元素而不是<script>？
为什么脚本标签内有正文。如果您删除 script 标签，它会正常工作
【参考方案1】：
脚本标签内未被解释为 JavaScript 的标记将被完全忽略。 DOM 中不存在 #sub-element 元素。
您可以使用DOMParser将内容转为文档，根据需要进行更改，然后将文档转回文本并在模板中替换：
const template = document.querySelector('#element');
const doc = new DOMParser().parseFromString(template.textContent, 'text/html');
doc.querySelector('#sub-element').textContent = 'Some text';
template.textContent = doc.body.outerHTML;
console.log(template.textContent);<script type="text/template" id="element">
<body>
<label id="sub-element">Replace me</label>
</body>
</script>但是，如果您打算做任何不平凡的事情，我强烈建议您使用框架代替将内容插入模板，而不是使用手动 DOM 操作。例如，使用 React，您可以执行以下操作：
const SomeLabel = ( content ) => <label id="sub-element">content</label>;
const App = () =>
return <SomeLabel content="Some Text" />;
;
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>【讨论】：
【参考方案2】：<body>
<label id="sub-element">replace me</label>
<script>
document.getElementById('sub-element').innerHTML = "new sentence";
</script>
</body>
也许你可以试试这个代码
【讨论】：
以上是关于<script> 的内部元素无法被文档识别的主要内容，如果未能解决你的问题，请参考以下文章