Executing Injected After AJAX Call</h2> <p>In an AJAX-based application, you may encounter situations where you need to dynamically inject a <script> tag into the page's DOM. However, after the AJAX response loads and injects the <script> tag, it may not execute automatically.</p> <h3>Problem Statement</h3> <p>Consider a div element with the ID "Content" that contains a <script> tag. After an AJAX call successfully loads data from a PHP file into the "Content" div, the <script> tag inside the loaded content remains unexecuted.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><div></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><div></pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <h3>Solution</h3> <p>To execute the injected <script> tag, you can manually evaluate its innerHTML using JavaScript:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var arr = MyDiv.getElementsByTagName('script'); for (var n = 0; n < arr.length; n++) eval(arr[n].innerHTML); //run script inside div</pre><div class="contentsignin">Copy after login</div></div> <p>By iterating through the getElementsByTagName('script') collection and evaluating the innerHTML of each <script> element within the "MyDiv" div, you can ensure that the injected code executes properly.</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
