我有一个模板<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，它没有做任何事情。
谢谢
脚本标记中未被解释为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><body>
<label id="sub-element">replace me</label>
<script>
document.getElementById('sub-element').innerHTML = "new sentence";
</script>
</body>
也许你可以试试这个代码