jQuery append html with scripts

Question

I need some help with jQuery.

When i'm trying to get html with embded js page content via $.get, it's works good. But when i'm trying to append it to some div, all scripts are removing.

In a console its look fine when i'm doing smthing like this

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

but when i'm doing

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

script is running and removing

How can i append html+js code to div without running and removing?

Thanks!

UPD:

My example :

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>

...

And i'm going to get

<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>

How can i do it?

What do you mean by "running and removing?" What are you trying to do? — Explosion Pills
– Explosion Pills, Commented Feb 24, 2013 at 1:19
@ExplosionPills I mean in this case $('.my_div').html($('.my_div').html() + '<script>alert("text")</script>') i get alert in browser and no one word about <script>alert("text")</script> in code =( — Dmitriy Bilichenko
– Dmitriy Bilichenko, Commented Feb 24, 2013 at 12:48

Fabrício Matté · Accepted Answer · 2013-02-24 01:30:45Z

1

That's the default behavior of .html() - it will strip out scripts and eval them while appending content to the DOM. jQuery even provides $.parseHTML which defaults to stripping out scripts without evaluating them to prevent against XSS.

If you're already executing a script in the page, the vast majority of the time you can just put your code in the same script. But if you really want/need to append a new script to the page, you can do it through append:

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

Fiddle

answered Feb 24, 2013 at 1:30

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dmitriy Bilichenko Over a year ago

no success with this $('.my_div').append($('<script>', { text: 'alert("foo");' })); in result i catch just foo but i need to take <script>alert('foo')</script>

Fabrício Matté Over a year ago

Inspect the fiddle, it clearly has the script tag appended to the DOM. Though, this sounds like a XY problem - update the question to show us what's the issue you're trying to solve with this and we'll find a better way around.

Tyler Collier Over a year ago

Thanks for pointing me to the keepScripts parameter for parseHTML().

Infinity · Accepted Answer · 2013-02-24 01:28:55Z

0

You can use append if you don't want to remove the original content. As for stop the script tag from executing, one way is to change to script type to "text/html" or use html escape function.

http://jsfiddle.net/R5xad/

answered Feb 24, 2013 at 1:28

Infinity

3,9352 gold badges29 silver badges35 bronze badges

Collectives™ on Stack Overflow

jQuery append html with scripts

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related