Javascript JQuery：附加在元素之前

JQuery: Append before an element

提问by Dev1997

Using JQuery I have appended a div into a container called .mobile-sub. I call the append by doing:

使用 JQuery，我将一个 div 附加到一个名为.mobile-sub. 我通过执行以下操作来调用附加：

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

It works fine but the problem is that it is placing the div afterthe .s2_errortag whereas I need it to be placed beforeso the end result HTML will look like this:

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

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

Any ideas?

有任何想法吗？

回答by Rajshekar Reddy

Using various options like below

使用如下所示的各种选项

insertBefore

插入前

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

OR by writing another selector inside your insertBefore

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

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

Meaning

意义

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

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

---

---

prepend

前置

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

So <div>mydiv</div>will always be added as the first childof mobile-sub

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

---

---

before

前

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

回答by Vijay Vj

You can do it two ways:

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

1. Before

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

2. InsertBefore

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

1. 前

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

2. 插入前

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

Both do the same but they are syntactically different.

两者都做同样的事情，但它们在语法上不同。

回答by Milind Anantwar

You want to add element as first child. You need to use .prepend()instead of .append():

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

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

You can also use .insertBefore ():

您还可以使用.insertBefore ()：

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

or .before():

或.before()：

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

回答by Satpal

You can use .insertBefore()

您可以使用.insertBefore()

Insert every element in the set of matched elements before the target.

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

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

OR, .before()

或，.before()

Insert content, specified by the parameter, before each element in the set of matched elements.

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

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

Note: The .before()and .insertBefore()methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target.

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

回答by Rocki

.insertBefore( target )

Description: Insert every element in the set of matched elements before the target.

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

or

或者

.before( content [, content ] )

Description: Insert content, specified by the parameter, before each element in the set of matched elements.

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