Question

我正在从AJAX请求中接收HTML代码段。 HTML也包含一些脚本标签，但是当我使用JQuery将HTML添加到DOM元素时，脚本标签没有被添加到DOM。其余元素添加得很好。这是我收到的样本：

<div>
<h1>Hello World!</h1>
<script type="text/javascript">{Some JS}</script>
</div>

将其添加到DOM时，不会添加脚本标签。

编辑我认为最好为不赞成投票提供解释，以便人们知道将来要关心什么。无论如何，谢谢大家的帮助。我的问题有所不同，我不仅收到脚本，还收到一些HTML，我想知道为什么在我向其添加HTML响应的DOM下没有添加标签。我对带有src的脚本标签使用了一些答案，而对于包含嵌入式代码的脚本标签则使用了下面的代码

var result = $(response); 
    $('#contentdiv').html(result.html());
    result.filter('script').each(function(){
        $.globalEval(this.text || this.textContent || this.innerHTML || '');
    });

我也找到了一篇不错的文章 http://blog.gauffin.org/2015/07/embedded-script-tags-in-content-loaded-through-ajax-and-execute-the-script-tags-dynamically/

Answer 1

您可以按以下方式使用：

<script>
        var src = 'response.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(src, s);
</script>

Answer 2

您可以这样做

var data = jQuery(xhr.responseText).not('script');
var scripts = jQuery(xhr.responseText).filter('script');
//Your logic to append ajax response to specific node in DOM
jQuery(scripts).appendTo('body');

您可以参考以下帖子Calling a JavaScript function returned from an Ajax response来执行内部脚本

Answer 3

这是实现此目标的方法

document.body.appendChild(document.createElement('script')).src=response.src;

Answer 4

这是简单得多的代码：

let the_script_el = $('<script>').html('alert("testing");');
$('body').append(the_script_el);

请轻松查看此小提琴：http://jsfiddle.net/syamsoul/e7jdp5av/

Answer 5

window.onload = function() {
var s = document.createElement('script');
s.type = 'text/javascript';
var code = 'alert("hello world!");';
try {
  s.appendChild(document.createTextNode(code));
  document.body.appendChild(s);
}
catch (e) {
  s.text = code;
  document.body.appendChild(s);
}
}

如何添加AJAX响应中收到的脚本标签

5 个答案: