CODEWITHSUNDEEP
javascriptajaxdom
Andy Chen
Andy Chen

Reputation: 33

replace DOM node with Ajax response

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!

Upvotes: 3

Views: 1360

Answers (4)

David Thomas
David Thomas

Reputation: 253308

I'd suggest, while you already have an answer, the following:

var newContent = '<div class = "element3"> some other text</div>',
    temp = document.createElement('div'),
    div1 = document.getElementsByClassName('element1')[0];

temp.innerHTML = newContent;

div1.parentNode.replaceChild(temp.firstChild, div1);​

JS Fiddle demo.

Given that your problem was, basically, that the 'new content' wasn't a DOM node the most sensible solution is to simply make it a DOM node. Though this does, of course, carry the cross-browser caveats of using document.getElementsByClassName().

And below is a cross-browser version that should provide a fall-back for those browsers that don't support document.getElementsByClassName() (works with IE 7, other versions not available; it's worth noting that the ternary condition may require an upgrade to cope with how some of those browsers might handle the conditional assessment):

function findByClassName(classname, el) {
    if (!classname) {
        return false;
    }
    else {
        el = !el ? document.getElementsByTagName('body')[0] : el;
        var children = el.getElementsByTagName('*'),
            withClass = [];

        for (var i = 0, len = children.length; i < len; i++) {
            if (children[i].nodeType == 1) {
                var classes = children[i].className.split(/\s+/);
                for (var c = 0, leng = classes.length; c < leng; c++) {
                    if (classes[c] == classname) {
                        withClass.push(children[i]);
                    }
                }
            }
        }

        return withClass;
    }
}

var newContent = '<div class = "element3"> some other text</div>',
    temp = document.createElement('div'),
    div1 = document.getElementsByClassName ? document.getElementsByClassName('element1')[0] : findByClassName('element1')[0];

temp.innerHTML = newContent;

div1.parentNode.replaceChild(temp.firstChild, div1);​

JS Fiddle demo.

References:

Upvotes: 1

Trott
Trott

Reputation: 70065

If you just want to replace the text, set the innerText property on the target element. If you want to insert all the HTML, set the innerHTML property on the target element. To replace the target element itself, I believe you can use outerHTML.

Upvotes: 1

coderabbi
coderabbi

Reputation: 2301

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:

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+

Upvotes: 3

krg
krg

Reputation: 2790

Here's a jsFiddle example to replace a DOMElement with another.

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

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

var element = document.getElementsByClassName('element1')[0];
var replacement = document.getElementsByClassName('element3')[0];
element.parentNode.replaceChild(replacement, element);

Upvotes: 0

Related Questions