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解析器。但在大多数情况下，它仍然足够快。

Answer 2

function JS_Utils_BuildModal()
{
    // Create parent div
    var objModal = document.createElement("div");
    objModal.setAttribute('id', 'Modal');
    document.body.appendChild(objModal);

    // Create modal div
    var objContent = document.createElement("div");
    objContent.setAttribute("id", "Content");
    objModal.appendChild(objContent);

    // Create sending data paragraph
    var objData = document.createElement("p");
    objContent.appendChild(objData);
}

appendChild（）方法适用于任何DOM元素。 document.body是文档正文的DOM元素。

编辑：看起来Andy E已经正确回答了问题。

Answer 3

关于innerhtml，它实际上比dom更快： http://www.quirksmode.org/dom/innerhtml.html

JavaScript createElement帮助

3 个答案: