執行使用.innerHTML 插入的腳本
使用innerHTML 將內容插入到元素中可能會遇到插入內容中的腳本不執行的問題。雖然有使用 jQuery 或 eval 的解決方案，但以下是使用純 JavaScript 解決此問題的程式碼片段：
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);
});
}此函數採用元素和 HTML 字串作為參數。它用提供的字串替換元素的innerHTML，並迭代HTML 中的任何腳本元素。對於每個腳本元素，它都會建立一個具有相同屬性和腳本文字的新元素。最後，它用新的腳本元素取代舊的腳本元素。
要使用此功能，只需設定元素的innerHTML：
.innerHTML = HTML; // does *NOT* run <script> tags in HTML setInnerHTML(, HTML); // does run <script> tags in HTML
以上是在 JavaScript 中使用「innerHTML」時如何確保腳本執行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
