Jquery: Как я могу получить / установить HTML строковой переменной с помощью селекторов Jquery?

Question

Во-первых, извините за мой английский (я из Китая).

Прочитав эту статью ( как применить выбор элемента jQuery к строковой переменной ), я могу успешно получить элементы из строки, в которой хранится текст HTML. Например:

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 будет <li>some text 2</li>. Это то, что я хочу.

Но вопрос в том, если я хочу добавить еще один элемент LI в эту строку (htmlstr), как я могу это сделать?

Я установил s = новую HTML-строку, но htmlstr не изменяется.

Спасибо

Answer 1

Вы можете сделать это немного меньше кода:

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);

Просто измените селектор поиска и / или текст добавления, если вы хотите вставить элемент в другое место.

Answer 2

Я не уверен, что это лучший способ, но как насчет этого:

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();

По сути, вы вставляете HTML в DOM, добавляете новый элемент списка, затем возвращаете полученный HTML-код и удаляете добавленные вами элементы.

Answer 3

Я думаю, что можно выбрать ul и добавить новый li, используя следующий метод: http://api.jquery.com/append/