如何使用jQuery在div之间添加文本？

Question

我关注HTML代码：

<div class="modal-body">
<p style="text-align: justify;">Some text paragraph</p>
<br/>
<form></form>
</div>

我想在<br/>之后动态地将以下HTML添加到上面的HTML中。我该怎么办？

<div class="alert alert-danger alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    response<!-- response is the variable containing the text to be added--->
    </div>

Answer 1

要将HTML添加到给定元素，在这种情况下（显示为）div.modal-body，从HTML字符串（例如var htrmlString = "<div><button>...</button></div>"）插入，您可以使用prependTo()或{ {1}}：

prepend()

或者：

$(htmlString).prependTo('div.modal-body');

同样，虽然稍微复杂一些，但您可以使用：

$('div.modal-body').prepend(htmlString);

---

以下是问题原始版本的原始答案（自OP编辑后更正）。

最简单的解决方案是：

$(htmlString).insertBefore('div.modal-body:first-child');

虽然你也可以（如果你不介意丢失所有绑定的事件处理程序，并重新创建你的DOM）：

$('div.alert.alert-danger.alert-dismissible').append(response);

请注意，您似乎对CSS选择器感到困惑：

• $('#div.alert.alert-danger.alert-dismissible').html(function (index, html){ return html + ' ' + response; }); ：选择#alert-danger的元素，而不是：
• id="alert-danger"：选择.alert-danger或包含class的元素。

我上面使用的选择器alert-danger选择div.alert.alert-danger.alert-dismissible元素，这些元素包含指定类的每个（<div>，alert和{ {1}}）。

参考文献：

• append()。
• html()。
• insertBefore()。
• prepend()。
• prependTo()。

Answer 2

您必须使用append方法并在选择器中使用class而不是id：

$('.alert-danger').append(response);