How can I replace a element with another one?

Question

Here is my HTML:

<html>
    <head></head>
    <body>
        <section>
            <div class="should_be_replaced">something</div>
        </section>
    </body>
</html>

Also I have a variable which is containing some HTML tags:

var str = "<b>title</b><p>sth <span>sss</span></p>";

Now I want to replace the content of variable above with div.should_be_replaced element. How can I do that?

This is expected result:

<html>
    <head></head>
    <body>
        <section>
            <b>title</b><p>sth <span>sss</span></p>
        </section>
    </body>
</html>

`document.querySelector('.should_be_replaced').parentNode.innerHTML = str` — Jaromanda X, Mar 25 '17 at 10:49
Possible duplicate of [How to replace DOM element in place using Javascript?](http://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript) — Rob, Mar 25 '17 at 11:11

Mazz · Answer 1 · 2017-03-25T10:51:22.733

2

You can do it like this if you have jQuery:

var str = "<b>title</b><p>sth <span>sss</span></p>";
$(".should_be_replaced").parent().html(str);

or without jQuery

document.getElementsByClassName('should_be_replaced')[0].parentNode.inn‌erHTML = str

edited Mar 25 '17 at 10:51

answered Mar 25 '17 at 10:49

Mazz

1,859
26
38

Martin, be sure to include the **jQuery library** if you want to use this solution. – NewToJS Mar 25 '17 at 10:50
@NewToJS - Martin already tagget the question with jQuery, so he either tagged it incorrectly, or is using jQuery – adeneo Mar 25 '17 at 10:51
Yes, jQuery is tagged in the question but if you look at the OP's source code, it doesn't have `jQuery` linked hence pointing out the use of jQuery in your solution... since you failed to do that. – NewToJS Mar 25 '17 at 10:52
jQuery and vanilla, covering both. Great answer! +1 – NewToJS Mar 25 '17 at 10:54

adeneo · Accepted Answer · 2017-03-25T10:53:50.357

You can use jQuery's replaceWith

$('.should_be_replaced').replaceWith(str);

var str = "<b>title</b><p>sth <span>sss</span></p>";
$('.should_be_replaced').replaceWith(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head></head>
    <body>
        <section>
            <div class="should_be_replaced">something</div>
        </section>
    </body>
</html>

Without jQuery

document.querySelector('.should_be_replaced').outerHTML = str;

var str = "<b>title</b><p>sth <span>sss</span></p>";
document.querySelector('.should_be_replaced').outerHTML = str;

<html>
    <head></head>
    <body>
        <section>
            <div class="should_be_replaced">something</div>
        </section>
    </body>
</html>

score 1 · Answer 3 · answered Mar 25 '17 at 11:58

1

you can use direct html method for change content.

var str = "<b>title</b><p>sth <span>sss</span></p>";
    jQuery("section").html(str);

http://jsfiddle.net/dmxk59gg/

answered Mar 25 '17 at 11:58

Manish Patolia

507
5
23

score 0 · Answer 4 · edited Mar 25 '17 at 11:09

0

Try this:

<html>
    <head></head>
    <body>
        <section>
            <div id="should_be_replaced" onclick="click()">something</div>
        </section>
     <script>
        function click() {
            var str = "<b>title</b><p>sth <span>sss</span></p>";
            document.getElementById("should_be_replaced").innerHTML = str;
        }
     </script>
    </body>
</html>

edited Mar 25 '17 at 11:09

Juan Serrats

1,358
5
24
30

answered Mar 25 '17 at 10:59

ufuk

367
3
16

score 0 · Answer 5 · answered Mar 25 '17 at 10:59

0

You can simply do by jQuery.

var section = jQuery('section');
section.find('div').remove();
section.html(str);

answered Mar 25 '17 at 10:59

How can I replace a element with another one?

5 Answers5