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!

Hey, post your jQuery code as well so we know why your methods didn’t work. — Sebastian Simon
– Sebastian Simon, Commented Apr 26, 2015 at 15:30
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. — somuch72
– somuch72, Commented Apr 26, 2015 at 16:04

j08691 · Accepted Answer · 2015-04-26 16:06:09Z

3

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>

answered Apr 26, 2015 at 16:06

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Doye · Accepted Answer · 2015-04-26 16:13:58Z

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:

edited Apr 26, 2015 at 16:13

answered Apr 26, 2015 at 16:05

Michael Doye

8,2115 gold badges43 silver badges57 bronze badges

2 Comments

somuch72 Over a year ago

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 a year ago

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.

Tushar · Accepted Answer · 2015-04-26 16:08:34Z

1

Use after

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

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

edited Apr 26, 2015 at 16:08

answered Apr 26, 2015 at 15:30

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

1 Comment

somuch72 Over a year ago

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

kidA · Accepted Answer · 2015-04-26 15:30:36Z

1

Try this

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

answered Apr 26, 2015 at 15:30

kidA

1,3871 gold badge9 silver badges20 bronze badges

Collectives™ on Stack Overflow

add html element with jquery

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related