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>

每当我输入更多信息时生成，这些信息会被填充到上面标有＆＃34;内容＆＃34;的地方。

我的问题是没有编写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

我会在html中隐藏主div元素（非常像模板），当用户触发更改时，任何选择器都可以读取/重用容器div，并通过$(desiredPlace).html(container)放入所需位置。这个方法实际上不会导致重新嵌套的div。

使用纯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的最有效方法是什么？

3 个答案: