使用 jquery 创建复杂的 HTML答案

【问题标题】：Creating complex HTML with jquery使用 jquery 创建复杂的 HTML
【发布时间】：2015-01-03 07:00:28
【问题描述】：

我无法使用 javascript 或者最好是 jQuery 创建复杂的 html。我的目标是创建这个：

<div class="clone"> <div class="nested_clone> <span> </span> </div> </div>

纯粹使用 jquery 并运行一个循环，我将它多次附加到容器中。我知道我可以使用 jquery 创建 html 并使用以下代码添加一个类：

clone = $("<div></div>",{ class:"clone"});
nested_clone = $("<div></div>",{class:"nested_clone"});
nested_span = $("<span></span>");

我从这里去的地方是我变得朦胧的地方。因为我想将nested_span 放在nested_clone 中，然后将nested_clone 放在克隆中。然后我想运行一个循环，在其中克隆克隆并将其附加到容器中：

for(i=0; i < some_length; i++ ){ clone.appendTo("Container") }

结果是我的 DOM 中只有一个 Clone 元素。我测试过的任何其他解决方案都失败了，所以我希望这里的 someoen 可以向我展示一些我尚未学习的 JavaScript 魔法。谢谢！

【问题讨论】：

您需要一个模板解决方案，否则这将很快变得难以管理。查看 Handlebars (handlebarsjs.com)
clone.clone().appendTo("Container") ???在您的示例中，您只是一次又一次地在容器末尾移动相同的元素。也就是说，您最好使用上面建议的模板系统
如果你需要一个模板系统来创建三个元素并在循环中克隆它们，你可能应该学习更多的jQuery！
@adeneo 我猜 OP 想要更复杂的解决方案，我可能错了
@A.Wolff - 可能，但我认为模板引擎仍然是可选的。在某些情况下，它使事情变得更容易，在其他情况下，它只是开销，至少在我看来。

标签： jquery html loops clone appendto

【解决方案1】：

如果你只是想将元素相互嵌套，你可以使用 jQuery append 方法。 http://api.jquery.com/append/

clone = $("<div></div>",{ class:"clone"});
nested_clone = $("<div></div>",{class:"nested_clone"});
nested_span = $("<span></span>");

finalElement = clone.append(nested_clone.append(nested_span));

另一个说明： 我通常不喜欢在 Javascript 中创建 HTML 元素，因为它们变得更难管理。我建议在 HTML 文档中创建一个原型元素并重用它。

<div class="clone prototype"><div class="nested_clone"><span><span></div></div>

然后在 jQuery 中

$('.test').append($('.prototype').clone().removeClass('prototype'));

在 CSS 中

.prototype {display: none;}

【讨论】：

请注意：首先是clone()，然后是removeClass()，否则原型将失去其类别。

【解决方案2】：

试试

var container = $("#Container")
, clone = $("<div></div>",{ class:"clone"}) 
.append(
    $("<div></div>",{class:"nested_clone"})
    .append(
        $("<span></span>")
    )
)
, some_length = 5;
$.when(clone.appendTo(container), some_length)
.then(function(el, n) {
    do {
      el.clone().appendTo(container);
        --n
    } while (n > 0)
})

var container = $("#Container")
, clone = $("<div>abc</div>",{ class:"clone"})
.append(
    $("<div>def</div>",{class:"nested_clone"})
    .append(
        $("<span>ghi</span>")
    )
)
, some_length = 5;
$.when(clone.appendTo(container), some_length)
.then(function(el, n) {
    do {
      el.clone().appendTo(container);
        --n
    } while (n > 0)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Container"></div>

【讨论】：