javascript - 如何使用 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()或prepend() :

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

或者:

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

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

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

<小时/>

以下是问题原始版本的原始答案(已由OP编辑更正)。

最简单的解决方案是:

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

尽管你也可以(如果你不介意丢失所有绑定(bind)的事件处理程序并重新创建 DOM):

$('#div.alert.alert-danger.alert-dismissible').html(function (index, html){
    return html + ' ' + response;
});

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

• #alert-danger :选择 id="alert-danger" 的元素，而:
• .alert-danger :选择 class 的元素的或包括 alert-danger .

上面我使用的选择器 div.alert.alert-danger.alert-dismissible选择<div>具有指定类的每个元素( alert 、 alert-danger 和 alert-dismissible )。

引用文献:

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