Auswerten dynamisch eingefügter Skripte mit .innerHTML Das Einfügen von Inhalten in eine Webseite mit .innerHTML kann manchmal zu Problemen führen, wenn dieser Inhalt Elemente. Dies liegt daran, dass der Skriptcode in diesen Elementen möglicherweise nicht automatisch ausgeführt wird.</p> <p>Um dieses Problem zu beheben, können wir diese Skripte explizit ausführen. Sehen wir uns an, wie das in JavaScript geht:</p> <p><strong>ES6-Implementierung:</strong></p> <pre>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); }); }</pre> <p><strong>Verwendung:</strong></p> <pre>.innerHTML = HTML; // Does not run <script> tags in HTML setInnerHTML(, HTML); // Runs <script> tags in HTML</pre> <p> Dieses Skript durchläuft den neu eingefügten Inhalt, sucht <script> Elemente und erstellt ein neues <script> Elemente mit ihren Attributen und ihrem Code. Es ersetzt dann das ursprüngliche <script> Elemente mit diesen neuen, um sicherzustellen, dass der Skriptcode ausgeführt wird.</p>