JavaScript createElement 帮助

Question

我有以下代码:

function JS_Utils_BuildModal ()
        {

            var objModal = document.createElement("div");

            objModal.setAttribute('id', 'Modal');

            document.body.appendChild(objModal);

        }

我想要做的是添加到它并创建一系列包含一些内容的 DIVS 和 P，这样当我运行该函数时我会得到以下内容:

<div id="Modal">
<div class="Content">
<p>Sending Data</p>
</div>
</div>

谢谢

Answer 1

实际上，这只是复制代码的 createElement 和 appendChild 部分，然后在其他对象上设置相关属性的问题:

function JS_Utils_BuildModal () 
{ 
    var objModal   = document.createElement("div"); 
    var objContent = document.createElement("div");
    var objP       = document.createElement("p");
    objModal.setAttribute('id', 'Modal');
    objContent.className = 'Content';
    objP.innerText = "Sending Data";
    objModal.appendChild(objContent);
    objContent.appendChild(objP); 
    document.body.appendChild(objModal); 
} 

或者，您可以使用 innerHTML 属性完成全部/部分操作，如下所示:

function JS_Utils_BuildModal () 
{ 
    var objModal   = document.createElement("div");
    objModal.setAttribute('id', 'Modal');
    objModal.innerHTML = '<div class="Content"><p>Sending Data</p></div>';
    document.body.appendChild(objModal); 
}

使用 innerHTML 通常比直接操作 DOM 慢，因为它调用 HTML 解析器。不过，在大多数情况下，它仍然足够快。