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

每次我输入更多信息时都会生成，这些信息会填充到上面标记为“内容”的地方。

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

我对如何解决这个问题的想法是像这样创建单独的变量:(这一切都在一个函数内部，该函数被调用以返回一个完成的 var，所有这些假设的变量在 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

有很多方法可以给这只猫蒙皮，但取决于您的工作量，创建隐藏模板并插入可能是最简单的选择。 只需将隐藏 block 添加到您的 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;