如果内容包含 <script>，则使用 .innerHTML 将内容插入网页有时会导致问题。元素。这是因为这些元素中的脚本代码可能不会自动执行。</script>
为了解决这个问题，我们可以显式执行这些脚本。让我们探索如何在 JavaScript 中执行此操作：
ES6 实现：
function setInnerHTML(elm, html) {
elm.innerHTML = html;
Array.from(elm.querySelectorAll("script")).forEach(oldScriptEl => {
const newScriptEl = document.createElement("script");
Array.from(oldScriptEl.attributes).forEach(attr => {
newScriptEl.setAttribute(attr.name, attr.value);
});
const scriptText = document.createTextNode(oldScriptEl.innerHTML);
newScriptEl.appendChild(scriptText);
oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
});
}用法：
.innerHTML = HTML; // Does not run <script> tags in HTML setInnerHTML(, HTML); // Runs <script> tags in HTML
该脚本遍历新插入的内容，定位到<script>元素，并创建新的 <script>元素及其属性和代码。然后它会替换原来的 <script>包含这些新元素的元素，确保脚本代码得到执行。</script>
以上是如何确保使用 .innerHTML 执行动态插入的脚本？的详细内容。更多信息请关注PHP中文网其他相关文章！
