在 Javascript 中创建嵌套 div 的最有效方法是什么？

Question

本质上，我正在尝试重新创建此代码：

<div class="row" style="-moz-border-radius: 18px 18px 18px 18px; -webkit-border-radius: 18px;  border-radius: 18px 18px 18px 18px; background-color:white; margin-bottom:20px">
    <div class="col-lg-12">
        <div class="row" style="margin-bottom:10px;">
            <div class="col-xs-6">
                <center><font size="6">Content</font></center>
            </div>
            <div class="col-xs-6">
                <center>Content</center>
            </div>
        </div>
        <div class="row" style="margin-bottom:10px;">
            <div class=" col-xs-4" style="text-align: right;">
                <font size="3"><b>Content</b></font>
            </div>
            <div class="col-xs-8">
                <font size="3">Content</font>
            </div>
        </div>
        <div class="row" style="margin-bottom:10px;">
            <div class="col-xs-4" style="text-align: right;">
                <font size="3"><b>Content</b></font>
            </div>
            <div class="col-xs-8">
                <font size="3">Content</font>
            </div>
        </div>
        <div class="row" style="margin-bottom:10px;">
            <div class="col-xs-4" style="text-align: right;">
                <font size="3"><b>Content</b></font>
            </div>
            <div class="col-xs-8">
                More Content
            </div>
        </div>
        <button class="btn btn-primary btn-lg btn-block" style="margin-bottom:15px">Launch GPS!</button>
    </div>
</div>

每次我输入更多信息时都会生成，这些信息会填入上面标记为 "content" 的地方。

我的问题不是编写 javascript 来追加数据，而是创建一种在我每次输入数据时生成上述代码的方法。

我对如何解决这个问题的想法是像这样创建单独的变量：（这都在一个函数内部，该函数被调用到 return 一个完成的变量，所有这些假设的变量都串在一起appendChild 函数链）

var divDisplay = document.createElement('div');
divDisplay.className = 'row';
description.setAttribute("style", "-moz-border-radius: 18px 18px 18px 18px; -webkit-border-radius: 18px;  border-radius: 18px 18px 18px 18px; background-color:white; margin-bottom:20px;");

..然后执行 appendChild() 调用以进一步实现.. 像这样：

var divDisplay2 = document.createElement('div');
divDisplay2.className = 'col-lg-12';
divDisplay.appendChild(
    divDisplay.appendChild(divDisplay2)
);

但最终我遇到了错误，试图将更多内容放入那些附加子项中。

有没有更好的方法？更快的方法？你能告诉我你会如何编写这个代码吗？

Answer 1

我会在 html 的某处隐藏主 div 元素（非常像模板），当用户触发更改时，容器 div 可以是 read/reused 通过任何选择器并通过 $(desiredPlace).html(container) 放入所需位置。该解决方案实际上不会导致重新创建嵌套 divs。

使用纯 js： http://jsfiddle.net/c2jghmvk/

Answer 2

使用纯 javascript，您可以像这样尝试使用 innerHTML：

document.getElementById("parent").onclick=
function appendEl(){
    var parent = document.getElementById("parent");
    parent.innerHTML += "<div class='yourClass'> child </div>";
}

#parent{
    border: 1px solid blue;
}

<div id="parent" > click to add child in parent </div>

Answer 3

有很多方法可以给这只猫蒙皮，但取决于您的工作量，创建隐藏模板并插入可能是最简单的选择。只需将隐藏块添加到您的 DOM

<div id="template" class="hidden">
    <div class="row" style="margin-bottom:10px;">
        <div class="col-xs-4" style="text-align: right;">
            <font class="contentHeading" size="3"><b>{ContentHeading}</a></font>
        </div>
    <div class="col-xs-8">
        <font class="contentText" size="3">{ContentText}</font>
    </div>
</div>

然后从模板中拉出 HTML 并插入您的文本

var parentDiv = document.getElementById('someDiv');
var myTemplate = document.getElementById('template');
var newRowHtml = myTemplate.innerHTML.replace('{ContentHeading}', heading).replace('{ContentText}', text);
document.getElementById('someDiv').innerHTML += newRowHtml;

请注意，如果您的模板很大，使用字符串替换功能可能不是您的最佳选择。

或者，如果您要插入大量内容，最好使用模板库。有很多可供选择，但 Handlebars 代码例如看起来像这样。

var templateSource   = document.getElementById("row-template").innerHTML;
var template = Handlebars.compile(templateSource);

然后当你想插入一行时只需使用

var newRowHtml = template({
    heading: heading,
    text: text
}); 
document.getElementById('someDiv').innerHTML += newRowHtml;

在 Javascript 中创建嵌套 div 的最有效方法是什么？

What is the most efficient way to create nested div's in Javascript?

html

javascript

jquery

nested

appendchild