Executing Elements Injected via AJAX</strong></p> <p>In certain scenarios, an AJAX call may fetch content that includes <script> tags. However, the script code within these tags might fail to execute after being injected into the DOM.</p> <p><strong>Problem Explanation:</strong></p> <p>Consider the following HTML structure:</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> <p>An AJAX request is made to populate the "Content" div with data from a PHP file. Suppose the PHP response includes the following code:</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> <p>After the AJAX request completes, the injected <script> tag may not be executed due to a lack of access to the DOM at the time of insertion.</p> <p><strong>Solution:</strong></p> <p>To execute the injected <script> code, one can utilize the following JavaScript technique:</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>This code retrieves all <script> elements within the specified div and evaluates their innerHTML, effectively executing the code they contain.</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
