Javascript 在不存在节点的上下文中引用该节点时发生DOM错误

我试图用DOM和javascript构建一个包含各种div的页面，如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>

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

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

我认为是“oMRch.appendChild（oAR1ch）；（最后一行）产生了错误，但为什么呢

提前谢谢 AM

您可以使用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);

var divMain=document.createElement（'div'）；
divMain.className=divMain.id=“divMain”；
divMain.innerHTML=
“现场优化”+
'' + 
“img1”+
'' + 
“btn2”+
'';
document.body.appendChild（divMain）；

为什么要查找已有引用的元素？例如，您刚刚将

oRt1

放在DOM中，那么为什么要

document.getElementById（“divRt1”）呢

？您的

oRt1

变量引用了它。您的代码使用了与您引用的结构不同的

id

值，这使得它几乎无法遵循。例如，您的代码使用了

id

“divRt1”

，它在示例结构中没有出现。

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