Evaluating Dynamically Inserted Scripts Using .innerHTML Inserting content into a web page using .innerHTML can sometimes cause problems if that content includes elements. This is because the script code within these elements may not be automatically executed.</p> <p>To resolve this issue, we can execute these scripts explicitly. Let's explore how to do that in JavaScript:</p> <p><strong>ES6 Implementation:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div> <p><strong>Usage:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>.innerHTML = HTML; // Does not run <script> tags in HTML setInnerHTML(, HTML); // Runs <script> tags in HTML</pre><div class="contentsignin">Copy after login</div></div> <p>This script traverses the newly inserted content, locates <script> elements, and creates new <script> elements with their attributes and code. It then replaces the original <script> elements with these new ones, ensuring that the script code gets executed.</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
