DOM error for reference a Node in a context where it does not exist

Question

i am try to construct with DOM and javascript a page with various div like this in html:

<div id="divMain" class="divMain">
<div id="divT1" class="divT1"> onsite optimization </div>
<div id="divR1" class="divR1">
    <div id="divR11" class="divR11">img1</div>
    <a style="display:block" href="#">
        <div id="divR12" class="divR12">btn1</div>
    </a>
    <div id="divR13" class="divR13">btn2</div>
</div>
</div>

with various main div that contain others div .

I try to do this with DOM in js script:

oRmain = document.createElement("div");
oRmain.className = "divRMcss";
oRmain.id = "divRmain";


oRt1 = document.createElement("div");
oRt1.className = "divRt1css";
oRt1.id = "divRt1";


oRa1 = document.createElement("div");
oRa1.className = "divR1css";
oRa1.id = "divR1";
oRa11 = document.createElement("div");
oRa11.className = "divR11css";
oRa11.id = "divR11";
oRa12 = document.createElement("div");
oRa12.className = "divR12css";
oRa1.id = "divR12";
oRa13 = document.createElement("div");
oRa13.className = "divR13css";
oRa13.id = "divR13";


//Create on fly the entire page
    document.body.appendChild(oRmain);
    document.body.appendChild(oRt1);
    document.body.appendChild(oRa1);
    oMRch = document.getElementById("divRmain");
    oTRch = document.getElementById("divRt1");
    oAR1ch = document.getElementById("divR1");
    t = document.createTextNode("Onpage scan");
    //oOch = document.createTextNode(response.mtags.title);
    oTRch.appendChild(t);
    //oAR1ch.appendChild(oOch);
    oMRch.appendChild(oTRch);
    oMRch.appendChild(oAR1ch);

But when i try this code browser display an alert:

Error reading the response: NotFoundError:An attempt was made to reference a Node in a context where it does not exist.

I think is "oMRch.appendChild(oAR1ch); (last line) that create error, but why?

Thanks in advance AM

Answer 1

You could create that structure using DOM methods, like so:

function createElement(tagName, id, className) {
    var elm = document.createElement(tagName);
    if (id) {
        elm.id = id;
    }
    if (className) {
        elm.className = className;
    }
    return elm;
}

var divMain = createElement('div', 'divMain', 'divMain');

var divT1 = createElement('div', 'divT1', 'divT1');
divT1.appendChild(document.createTextNode(" onsite optimization "));
divMain.appendChild(divT1);

var divR1 = createElement('div', 'divR1', 'divR1'); 
divMain.appendChild(divR1);

var divR11 = createElement('div', 'divR11', 'divR11');
divR11.appendChild(document.createTextNode('img1'));
divR1.appendChild(divR11);

var a = createElement('a');
a.style.display = "block";
a.href = "#";
divR1.appendChild(a);

var divR12 = createElement('div', 'divR12', 'divR12');
divR12.appendChild(document.createTextNode('btn1'));
a.appendChild(divR12);

var divR13 = createElement('div', 'divR13', 'divR13');
divR13.appendChild(document.createTextNode('btn2'));
divR1.appendChild(divR13);

document.body.appendChild(divMain);

Or you could use innerHTML, which works on all browsers:

var divMain = document.createElement('div');
divMain.className = divMain.id = "divMain";
divMain.innerHTML =
    '<div id="divT1" class="divT1"> onsite optimization </div>' +
    '<div id="divR1" class="divR1">' + 
        '<div id="divR11" class="divR11">img1</div>' + 
        '<a style="display:block" href="#">' + 
            '<div id="divR12" class="divR12">btn1</div>' + 
        '</a>' + 
        '<div id="divR13" class="divR13">btn2</div>' + 
    '</div>';
document.body.appendChild(divMain);