Replace node with innerhtml

Question

With JavaScript I want to remove a specific DOM node and replace it with the innerHTML. For example I want to change

<div>
...
   <div id="t1">
        this is <b> the text </b> I want to remain.
   </div>
...
</div>

To

<div>
...
    this is <b> the text </b> I want to remain.
...
</div>

Answer 1

I just modified the HTML Like this.

<div>
<div id="t0">
<div id="t1">
        this is <b> the text </b> I want to remain.
</div>
</div>
</div>

And you do something like

document.getElementById("t0").innerHTML = "this is <b> the text </b> I want to remain.";

Hope it works

Answer 2

you might want to consider using jquery if that's possible. it would make your life way way wayyyyyyyy easier.

once you have jquery, you can easily do this via

$("#t1").html("this is <b> the text </b> I want to remain.");

and if you find it a hassle to learn, you can always start by learning the jquery selectors. you wouldn't know why you haven't been using it all this while :)

sorry if this is not what you want exactly..

~jquery addict

Updated:

To show what html text to put inside.

Answer 3

If you are using jQuery, you can try

var inner = j$("#t1").html()
$('#t1').replaceWith(inner);

Answer 4

This works:

var t1 = document.getElementById("t1");
t1.parentNode.innerHTML = t1.innerHTML;

Edit:

Please note that if the parent of t1 has any other children, the above will remove all those children too. The following fixes this problem:

var t1 = document.getElementById("t1");
var children = t1.childNodes;
for (var i = 0; i < children.length; i++) {
    t1.parentNode.insertBefore(children[i].cloneNode(true), t1);
}
t1.parentNode.removeChild(t1);

Answer 5

Try this:

var oldElem = document.getElementById('t1');
oldElem.innerHTML = 'this is <b> the text </b> I want to remain.';
var parentElem = oldElem.parentNode;
var innerElem;

while (innerElem = oldElem.firstChild)
{
  // insert all our children before ourselves.
  parentElem.insertBefore(innerElem, oldElem);
}
parentElem.removeChild(oldElem);

There is a demo here.

This is effectively the same thing as .replaceWith() from jQuery:

$("#t1").replaceWith('this is <b> the text </b> I want to remain.');