Jquery: How can I Get/Set html of a String Variable by using Jquery Selectors?

Question

Firstly, sorry for my English (I'm from China).

By reading this article(how to apply jQuery element selection to a string variable), I can successfully get Elements from a String which stores HTML text. For example:

var htmlstr = "<div><ul><li>some text 1</li></ul></div><div><ul id=list><li>some text 2</li></ul></div>";
var s = $('ul#list', $(htmlstr)).html();

s will be <li>some text 2</li>. It's what I want.

But the question is, if I want to add another LI element to this string (htmlstr) how can I do?

I set s = new html string but htmlstr doesn't change.

Thanks

Nick Craver · Accepted Answer · 2010-03-16 10:30:53Z

4

You can do it like this in a bit less code:

var htmlstr = "<div><ul><li>some text 1</li></ul></div><div><ul id='list'><li>some text 2</li></ul></div>";
htmlstr = $("<div />").html(htmlstr).find("ul#list").append("<li>New Item</li>").end().html();
alert(htmlstr);

Just change that find selector and/or the append text if you want to stick the element in a different place.

answered Mar 16, 2010 at 10:30

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

Comments

gamue · Accepted Answer · 2010-03-16 08:58:40Z

1

I think it's possible to select the ul and append the new li, with the following method: http://api.jquery.com/append/

answered Mar 16, 2010 at 8:58

gamue

1611 gold badge1 silver badge9 bronze badges

Comments

alex · Accepted Answer · 2010-03-16 09:34:36Z

1

I'm not sure if this is the best way but what about this:

var htmlstr = "<div><ul><li>some text 1</li></ul></div><div><ul id=list><li>some text 2</li></ul></div>";
// make sure you choose a suitable Id here that won't conflict
$('body').append('<div id="test" style="display: none;">' + htmlstr + '</div>');

$test = $('#test');

$test.find('ul').append('<li>new</li>');

htmlstr = $test.html();
// clean up the DOM
$test.remove();


var s = $('ul#list', $(htmlstr)).html();

Basically, you insert the HTML into the DOM, append the new list item and then get the resulting HTML back and remove the elements you added.

edited Mar 16, 2010 at 9:34

answered Mar 16, 2010 at 9:00

alex

492k205 gold badges891 silver badges992 bronze badges

1 Comment

ryan.dingy Over a year ago

good idea! I will use this one if I can't find any solution better :) thanks~

Collectives™ on Stack Overflow

Jquery: How can I Get/Set html of a String Variable by using Jquery Selectors?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related