在不存在的上下文中引用节点的 DOM 错误答案

【问题标题】：DOM error for reference a Node in a context where it does not exist在不存在的上下文中引用节点的 DOM 错误
【发布时间】：2013-11-05 11:30:38
【问题描述】：

我正在尝试用 DOM 和 javascript 在 html 中构建一个带有各种 div 的页面：

<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>

具有包含其他 div 的各种主 div。

我尝试在 js 脚本中使用 DOM：

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);

但是当我尝试这个代码时，浏览器会显示一个警报：

读取响应时出错：NotFoundError：试图在不存在的上下文中引用节点。

我认为是“oMRch.appendChild(oAR1ch);（最后一行）会产生错误，但为什么？

提前致谢上午

【问题讨论】：

你为什么要查找你已经引用过的元素？例如，您刚刚将 oRt1 放入 DOM 中，那么为什么要添加 document.getElementById("divRt1")？您已经拥有它，由您的 oRt1 变量引用。
您的代码使用了与您引用的结构不同的 id 值，因此几乎无法遵循。例如，您的代码使用了 id "divRt1"，它在您的示例结构中没有出现。

标签： javascript html css dom

【解决方案1】：

您可以使用 DOM 方法创建该结构，如下所示：

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);

或者您可以使用innerHTML，它适用于所有浏览器：

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);

【讨论】：