DOM innerHTML Duplicate Problem

Question

function SwapPlans(city, id) {
    var tp = GetTravelPlanById(id);
    var content = MakeHTMLAccordionMe(tp.items[0]);

    document.getElementById(city).innerHTML = " ";
    document.getElementById(city).innerHTML = content.innerHTML;
    document.getElementById(city).outerHTML = " ";
    document.getElementById(city).outerHTML = content.outerHTML;
}

Hi,

I have a problem with the snippet above. MakeAccordionME function returns the content that I want to change by document.getElementById(city) = value; but It doesn't remove the first content of the first div.

Is there any content.clear method in DOM javascript ?

thx

p.s. the div that returns from document.getElementById(city) is a jquery accordion div.

Answer 1

In DOM (as implemented by browsers, innerHTML is not standard until HTML5, but implemented by all) setting the innerHTML of an element will remove all it's content. The difference between innerHTML and outerHTML is that for outerHTML the tag itself is included. OuterHTML can thus been used to replace a tag. As content is of type element you don't want to use innerHTML anyway, you want to attach it to the dom element involved.

This might work:

function SwapPlans(city, id) {
    var tp = GetTravelPlanById(id);
    var content = MakeHTMLAccordionMe(tp.items[0]);
    var city = document.getElementById(city);

    // Remove all children of the div
    while (city.hasChildNodes()) {
        city.removeChild(city.children.item(0));
    }

    // Add a child to the city, making sure that it belongs to this document. Instead
    // of blind importing you might also check it's ownership.
    city.appendChild(city.ownerDocument.importNode(content))