如何追加到元素并多次设置文本

Question

我有一个元素列表，我想在其中使用Bootstrap元素创建类似结构的列表（示例）：

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

我想我会做类似的事情：

foreach(element)
{
   $("#ul").append($("<a href='" + element +"'>").text(element));
}


<div class="container">
  <div id="ul" class="list-group">
</div>

这可以正常工作，但是我不确定如何执行其他嵌套元素（ <h4>和<p> ）并设置其text属性。 还有一种更干净的方法来处理<a>元素的href部分吗？ 任何提示和技巧表示赞赏。

Answer 1

您需要单独构建这些元素，并在对其进行操作之后附加它们：

foreach(element)
{
  var anchor = $("<a href='" + element +"'>");
  var header = $('<h4>').text('stuff');
  var p = $('<p>').text('More stuff');
  anchor.append(header).append(p);
  $("#ul").append(anchor);
}

Answer 2

就主要问题而言，布伦南的答案肯定会成功。 至于在<a>执行href的另一种方法，请查看这篇文章 。