JQuery：在一个元素之前添加元素

Question

我使用 JQuery 将一个 div 添加到名为 .mobile-sub 的容器中。我通过以下方式进行添加：

$('.s2_error').addClass("revive");
$('.revive').parent(".mobile-sub").append('<div>mydiv</div>');

它能够正常工作，但问题在于它将 .s2_error 标签放在 div 之后，而我需要它放在前面，这样最终的 HTML 看起来像这样：

<div>mydiv</div>
<p class="s2_error">Error</p>

有什么想法吗？

- Dev1997

Answer 1

使用以下选项之一：

insertBefore

$("<div>mydiv</div>").insertBefore('.mobile-sub .s2_error');

或者通过在你的insertBefore内部编写另一个选择器

$("<div>mydiv</div>").insertBefore($('.revive').parent(".mobile-sub").find('.s2_error'));

意义

$('thisElementShouldBe').insertBefore('thisElement');

---

prepend

$('.revive').parent(".mobile-sub").prepend('<div>mydiv</div>');

因此，<div>mydiv</div>将始终作为mobile-sub的第一个子元素添加

---

after

 $('.revive').parent(".mobile-sub").find('.s2_error').before("<div>mydiv</div>");

- Rajshekar Reddy

---

谢谢您详细的回答 :) prepend 正好满足了我的需求。 - Dev1997

Answer 2

您可以有两种方式来完成这个任务：

1. Before

   $(".s2_error").before("<div>mydiv</div>");
   

2. InsertBefore

   $("<div>mydiv</div>").insertBefore(".s2_error");
   

两者都能实现相同的功能，但语法不同。

- Vijay Vj

Answer 3

你可以使用 .insertBefore()。

在目标元素之前插入匹配元素集合中的每个元素。

$("<div>mydiv</div>").insertBefore('.s2_error');

或者，.before()

在匹配元素集合中的每个元素前插入由参数指定的内容。

$('.s2_error').before("<div>mydiv</div>");

注意：`.before()`和`.insertBefore()`方法执行相同的任务。主要区别在于语法，具体来说是内容和目标的放置方式。

- Satpal

Answer 4

您想将元素添加为第一个子元素。您需要使用.prepend()而不是.append()：

$('.revive').parent(".mobile-sub").prepend('<div>mydiv</div>');

你也可以使用.insertBefore()：

$("<div>mydiv</div>").insertBefore('.s2_error');

或者 .before()：

$( ".s2_error" ).before( "<div>mydiv</div>" );

- Milind Anantwar

---

谢谢 :) 我希望早些时候就了解了 prepend，它真的非常有用。 - Dev1997

Answer 5

.insertBefore( target )

描述：将匹配元素集合中的每个元素插入到目标元素之前。

.before( content [, content ] )

描述：在匹配元素集合中的每个元素之前插入由参数指定的内容。

- Rocki