<script> 的内部元素未被文档识别

Question

我有一个包含一些 HTML 代码的模板 <script> 标签，并且我想用 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 但它没有做任何事情。

谢谢

Answer 1

脚本标签内未解释为 JavaScript 的标记将被完全忽略。 DOM 中不存在 #sub-element 元素。

您可以使用DOM解析器将内容转为文档，根据需要进行更改，然后将文档转回文本并在模板中替换：

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>

Answer 2

<body>
<label id="sub-element">replace me</label>
<script>
    document.getElementById('sub-element').innerHTML = "new sentence";
</script>
</body>

也许你可以试试这个代码

<script> 的内部元素未被文档识别

inner element of <script> not recognized by document

html

javascript

innerhtml

getelementbyid