Append an element in every class

Renzo CJ Published at Java

Renzo CJ

In JQuery ¿how can I append an img inside a div element in every second child of every div with the same class? I have this code and I want to insert a div tag between the h5 and p tags. The h5 tags are generic, they don't have any class or ID to reference, only their parent with tab-pane class.

<div class="tab-pane">
   <h5></h5>
   /*Here must be the new div in every tab-pane: <div><img></div>*/
   <p></p>
   <div></div>
   <ul></ul>
</div>
<div class="tab-pane">
   /*same content as before*/
</div>
<div class="tab-pane">
   /*same content as before*/
</div>
<div class="tab-pane">
   /*same content as before*/
</div>

So I tried this:

var paneWrap = document.createElement("div");
$(".tab-pane:nth-child(2)").append(paneWrap);

However the result was:

<div class="tab-pane">
   <h5></h5>
   <p></p>
   <div></div>
   <ul></ul>
</div>
<div class="tab-pane">
   <h5></h5>
   <p></p>
   <div></div>
   <ul></ul>
   <div></div> /*THE NEW DIV IS HERE!*/
</div>
<div class="tab-pane">
   <h5></h5>
   <p></p>
   <div></div>
   <ul></ul>
</div>
<div class="tab-pane">
   <h5></h5>
   <p></p>
   <div></div>
   <ul></ul>
</div>

Then I tried this:

var paneWrap = document.createElement("div");
$(".tab-pane > h5:nth-child(1)").append(paneWrap);

However in this case inside the h5 is the new div. Any ideas? tks!

Pranav Rustagi

Here is what is happening :

var paneWrap = document.createElement("div");
$(".tab-pane:nth-child(2)").append(paneWrap);

When you use the selector .tab-pane:nth-child(2), it selects all the .tab-pane elements which are second child. And after finding those elements, the div you created using paneWrap gets appended.

But when you use .tab-pane > h5:nth-child(1) for selector, it selects the h5 elements and appends the div inside it.

Now, to insert an element after/ before an element, here are the approaches :

var paneWrap = document.createElement("div");  //creating div element

For inserting after h5 :

$(".tab-pane > h5:nth-child(1)").after(paneWrap);

$(paneWrap).insertAfter(".tab-pane > h5:nth-child(1)");

For inserting before p tag :

$(".tab-pane > p:nth-child(2)").before(paneWrap);

$(paneWrap).insertBefore(".tab-pane > p:nth-child(2)");

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-10-20

Comments

0 comments

From Dev

Related Related

Article

Append an element in every class

Append an element in every class

How to append a letter to every element in an Array in scala

Find first element with class, use class to append header element

Javascript how to append an element to div with specific class

Ruler append element every 5 pixels to fill it's width

Append overwrites every element with last appended value (Python)

How to use function on every element by class name?

jquery (or css) every second element with class

Fire JS code for every element with the same class

JQuery check if existing appending element in element if not append to class but not this

Append css to a class using a different class on the same element

How to clone an element using class name and append it to the body

Append a dom element on ng-click to a specific class

jQuery append html element but with a different class name each time

How to append HTML only to the current element slected by class

Append a dom element on ng-click to a specific class

How to append a class if element contains certain CSS property

Loop through each element with class and append its text JQUERY

Recreate a text effect by adding a class to every text element

How to create a class after every single element dragged and dropped?

Give every first, second and third element a unique class using jQuery

javascript using a loop to change the display of every element that has a specific class

add class to first 5 element from every 10

Find every first instance of the first dynamic class of element with jquery

How to apply a bootstrap class to every same HTML element in css file?

Change color of every div element with the same class if another element is equals some text

Add class to every 3rd element and exclude elements with X class

Add class to every 3rd element and exclude elements with X class

addClass append every time in every Clone

Append a "+" at the beginning of every field without a "+"