Jquery: Insert an element in a HTML string?

Question

I have the following HTML string

<div class="row">
    <div class="col-sm-4">
    content
    </div>
    <div class="col-sm-4">      
    content
    </div>
    <div class="col-sm-4">
    contnt
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
    content
    </div>
    <div class="col-sm-4">      
    content
    </div>
</div>

I want to insert

<div class="col-sm-4">content</div>

at the end of the second row (before the closing div tag) so that the second row has three elements.

I tried many things using Jquery for the task, but I am unable to do it. The latest I tried is the following (suppose the long html is stored in HTML, and the to-be-inserted PIECE.

$(HTML).find('.col-sm-4').last().after(PIECE);

Can anyone help me out? There must be a JQuery way for this.

UPDATE: one more thing I forgot to say:

The number of rows is not fixed. I want the PIECE to be inserted into the last row. Note that the long HTML string is NOT part of a page. It is just a string stored in a Javascript variable. I need to insert

class="col-sm-4">content</div>

into it. In my many tests, I find that it is pretty difficult to me.

Thanks!

Your example is unclear, do you have an html string or html content? — B2K
– B2K, Commented Apr 15, 2014 at 6:57
HTML string, not DOM (part of a page) I need to insert <div class="col-sm-4">content</div> into the string. Sorry that I am not clear enough. — curious1
– curious1, Commented Apr 15, 2014 at 7:04
I believe jQuery works on the DOM. If you want string manipulation, you might just try a regex replace. Not sure. Or just replace the last </div> with your new content. — B2K
– B2K, Commented Apr 15, 2014 at 7:08
B2K, thanks for your input. I did string replacement in Javascript before my post. I feel there must be a JQuery solution on this. Maybe I am wrong. I tried many ways, to no success. — curious1
– curious1, Commented Apr 15, 2014 at 7:11

B2K · Accepted Answer · 2014-04-15 07:13:37Z

2

Here is one way to do it.

$('.row:last').append(PIECE);

See the fiddle: http://jsfiddle.net/tu935/ it does work.

HTML.replace(/<\/div>$/,PIECE+'</div');

edited Apr 15, 2014 at 7:13

answered Apr 15, 2014 at 6:45

B2K

2,6211 gold badge24 silver badges35 bronze badges

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

2 Comments

curious1 Over a year ago

B2K, thanks for your new way of handling this. The HTML should not be added to the page before adding the inserted content. I feel I can hide it before showing, and then add the inserted content, etc...I feel this is really too much. Javascript string replace is a lot easier. But I feel there must be an elegant JQuery solution.

curious1 Over a year ago

Thanks for the string replacement solution, which is what I did before my post. I am really surprised that no JQuery solution for this.

Hunain Usman · Accepted Answer · 2014-04-15 06:42:00Z

1

Assign an ID to the row you want to add the child to like this:

<div class="col-sm-4" id="test">content</div>

Then add this to javascript:

$('#test').find(':last').after('<div class="col-sm-4">content</div>');
OR
$('#test').append('<div class="col-sm-4">content</div>');

And try to use span inside divs if possible

answered Apr 15, 2014 at 6:42

Hunain Usman

2,2285 gold badges24 silver badges32 bronze badges

1 Comment

curious1 Over a year ago

Thanks for chiming in! I cannot modify the long HTML. It is passed from another place.

Felix · Accepted Answer · 2014-04-15 06:53:54Z

1

You can use:

$('.row').eq(1).find(':last').after('<div class="col-sm-4">content</div>');

Fiddle Demo

Based on your comment, you can do:

$('.row').last().find(':last').after('<div class="col-sm-4">content</div>');

edited Apr 15, 2014 at 6:53

answered Apr 15, 2014 at 6:39

Felix

38.2k8 gold badges45 silver badges56 bronze badges

7 Comments

curious1 Over a year ago

Thanks! I forgot to say this: The number of rows is not fixed.

Felix Over a year ago

So you want to add third element to those rows with class row which only have two elements?

curious1 Over a year ago

Felix, I want the PIECE get inserted into the last row. The last row always has two elements there.

curious1 Over a year ago

Did you miss the long HTML? I tried it, not working. Here is waht have: $(HTML).find('.row').last().find(':last').after('<div class="col-sm-4">content</div>');

curious1 Over a year ago

Most important, it should work on a HTML string, not on DOM. I tried. It is NOT working on the HTML string, but working on DOM.

|

Collectives™ on Stack Overflow

Jquery: Insert an element in a HTML string?

3 Answers 3

2 Comments

1 Comment

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

7 Comments

Related