add html element with jquery

Question

i need help to add element on html using jquery, i'm new on this territory, i've tried several method and failed

here's the HTML

<div id="relatedpostspro_0_1" class="rpp rpp_isotope" style="width:auto;">
 <div class="rpp_container">
 <legend>Related Posts</legend>
 <div>...</div>
 <div>...</div>
 <div>...</div>
 </div>
</div>

and i want to add this small piece

<div class="stripe-line"></div>

so it will result to:

<div id="relatedpostspro_0_1" class="rpp rpp_isotope" style="width:auto;">
 <div class="rpp_container">
 <legend>Related Posts</legend>
 <div class="stripe-line"></div>
 <div>...</div>
 <div>...</div>
 <div>...</div>
 </div>
</div>

using these 2 jquery from first 2 answer

$('.rpp_container').append('<div class="stripe-line"></div>');

and

var line = $('<div />').addClass('stripe-line');
line.appendTo('.rpp_container');

resulting the line added at the bottom, not right after <legend>Related Posts</legend>

Thanks a lot!

• Sebastian Simon: Hey, post your jQuery code as well so we know why your methods didn’t work.
• somuch72: i want to add stripe lines, tried several times with css using pseudo element :after and unsuccessful because it has repeat property. can't put width: 100%; because it's not start at left: 0; using overflow: hidden; not helping. the only things work only adding new element. tried with search replace not working, i'm new on this thing.

Answer 1

I believe you're in need of after() ("Insert content, specified by the parameter, after each element in the set of matched elements."):

$('.rpp_container legend').after('<div class="stripe-line"></div>');

jsFiddle example

Which produces:

<div id="relatedpostspro_0_1" class="rpp rpp_isotope" style="width:auto;">
 <div class="rpp_container">
 <legend>Related Posts</legend>
 <div class="stripe-line"></div>
 <div>...</div>
 <div>...</div>
 <div>...</div>
 </div>
</div>

Answer 2

There are many different methods to find / modify DOM elememts, append has already been shown:

$(document).ready(function() {
 $('.rpp_container').append('<div class="stripe-line"></div>');
});

Example Fiddle

---

You can also use after with find:

$(document).ready(function() {
 $('.rpp_container').find('legend').after('<div class="stripe-line"></div>')
});

Example Fiddle

---

A few other helpful methods for traversing the DOM:

• .closest()
• .next()
• .children()
• .siblings()
• .parents()

• somuch72: hi.. it works just by using after(). sorry for my igonrance, why using find()? i often saw jquery code using that, my guess is that to avoid wrong element?
• Michael Doye: Over time, your HTML may become more complicated, using find will help make it easier to select the correct element, this method basically allows us to search through the descendants of a set of elements in the DOM tree.

Answer 3

Use after

$('.rpp_container legend').after('<div class="stripe-line"></div>');

Reference: https://api.jquery.com/after/

• somuch72: work like a charm! thanks a lot. this community cool. usually it takes me 5 hours just to get 5-10 lines code, next time i will ask here after 3 hours trying :D

Answer 4

Try this

$('.rpp_container').append('<div class="stripe-line"></div>');