JQuery：在元素之前追加

Question

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

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

它工作正常，但问题是它将放在 .s2_error标签之后，而我需要将它放在之前，以便最终结果HTML将如下所示：

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

有什么想法吗？

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');

<强>前置

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

所以<div>mydiv</div>将始终添加为mobile-sub的第一个孩子

<强>前

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

Answer 2

您可以通过两种方式做到这一点：

1. 之前

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

2. 在此之前插入

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

两者都一样，但语法上却不同。

Answer 3

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

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

您还可以使用.insertBefore ()：

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

或.before()：

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

Answer 4

您可以使用.insertBefore()

  

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

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

或，.before()

  

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

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

注意：.before()和.insertBefore()方法执行相同的任务。主要区别在于语法特定，内容和目标的放置。

Answer 5

.insertBefore( target )

  

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

或

.before( content [, content ] )

  

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