Question

I have an ajax response which looks like this:

<div class = "element3"> some other text</div>

and I want to replace element1 in the following with resp:

<div class = "a">
  <div class = "element1"></div>
  <div class = "element2"></div>
</div>

So after the replace I would get:

<div class = "a">
  <div class = "element3"> some other text</div>
  <div class = "element2"></div>
</div>

I tried replaceChild() but it does not work because the response is not a DOM object..

Thanks!

Answer 1

Unlike innerHTML() which only replaces the content between the tags, outerHTML() will allow you to replace the opening & closing tags as well, effectively replacing the DOM node.

var element = document.getElementsByClassName('element1')[0];
element.outerHTML("<div class = 'element3'> some other text</div>");

See:

• http://help.dottoro.com/ljloliex.php
• http://help.dottoro.com/ljdkwhqf.php

Note: Due to the use of getElementsByClassName(), this solution is valid for (see: http://caniuse.com/getelementsbyclassname):

• Internet Explorer 9+
• Firefox 3+
• Opera 9.5+
• Chrome 4+
• Safari 3.1+