jQuery用脚本追加html

jQuery append html with scripts

本文关键字：html 追加 脚本 jQuery      更新时间：2023-09-26

我需要一些关于jQuery的帮助。

当我试图通过$.get获取带有装饰js页面内容的html时，它的效果很好。但是，当我试图将它附加到某个div时，所有的脚本都会被删除。

在控制台中，当我做类似的事情时，它看起来很好

$('.my_div').html() + '<script>alert("text")</script>'

但是当我做的时候

 $('.my_div').html($('.my_div').html() + '<script>alert("text")</script>')

脚本正在运行并删除

如何在不运行和删除的情况下将html+js代码附加到div？

谢谢！

UPD:

我的例子：

index.html

<div class="masonry">
    <div class="a1">
        <p>text</p>
        <script>alert('example')</script>
    </div>
    <div class="a1">
        <p>text</p>
        <script>alert('example')</script>
    </div>
    <div class="a1">
        <p>text</p>
        <script>alert('example')</script>
    </div>
</div>


<script>
$.get('get_news.php',function(response){
    $('.masonry').append(response);
});
</script>

get_news.php

    <div class="b1">
        <p>text</p>
        <script>alert('example1')</script>
    </div>
    <div class="b1">
        <p>text</p>
        <script>alert('example1')</script>
    </div>
    <div class="b1">
        <p>text</p>
        <script>alert('example1')</script>
    </div>

我要去

<div class="masonry">
    <div class="a1">
        <p>text</p>
        <script>alert('example')</script>
    </div>
    <div class="a1">
        <p>text</p>
        <script>alert('example')</script>
    </div>
    <div class="a1">
        <p>text</p>
        <script>alert('example')</script>
    </div>
    <div class="b1">
        <p>text</p>
        <script>alert('example1')</script>
    </div>
    <div class="b1">
        <p>text</p>
        <script>alert('example1')</script>
    </div>
    <div class="b1">
        <p>text</p>
        <script>alert('example1')</script>
    </div>
</div>

我该怎么做？

这是.html()的默认行为-它将剥离脚本和eval，同时将内容附加到DOM。jQuery甚至提供了$.parseHTML，默认情况下不评估脚本就剥离脚本，以防止XSS。

如果您已经在页面中执行了一个脚本，那么在绝大多数情况下，您可以将代码放在同一个脚本中。但是，如果您真的想要/需要在页面上附加一个新脚本，您可以通过append:来完成

$('.my_div').append($('<script>', { text: 'alert("foo");' }));

Fiddle

如果不想删除原始内容，可以使用append。至于停止脚本标记的执行，一种方法是将脚本类型更改为"text/html"或使用html转义函数。

http://jsfiddle.net/R5xad/

相关文章：