Как манипулировать HTML внутри переменной jQuery?

Я пытаюсь манипулировать HTML, хранящимся в переменной jQuery. Я хочу сделать эту манипуляцию, прежде чем писать эту переменную в документ.

Итак, у меня есть переменная, определенная как:

var sighting = "<div><span class="feed_name"></span></div>";

И я хочу поставить "hello world" в элемент span. Это та часть, с которой я не могу работать:

$(sighting).("span.feed_name").html(name);

Затем я записываю переменную "sighting" на страницу:

$(#sightings).append(sighting);

Что помещает HTML в переменную наблюдения в элемент <div id="sightings"></div> на странице.

Любая помощь будет принята с благодарностью!

Спасибо,

Марк

Ответы

Ответ 1

Я предпочитаю этот метод, у вас будет больше контроля над элементами, потому что они останутся в виде объектов и, таким образом, легче вставлять в функции.

sighting = document.createElement('div');

Затем вы можете манипулировать так, как если бы он уже был частью DOM

$(sighting).addClass("feed_name").html(name);
$(sighting).appendTo("#sighting");

ИЗМЕНИТЬ

Хм... похоже, я неправильно понял ваш вопрос. Я бы предпочел сделать элементы с помощью функции createElement().

sighting = document.createElement('div');
sighting_contents = document.createElement('span');

$(sighting_contents).addClass("feed_name").html(name);
$(sighting).append(sighting_contents);
$(sighting).appendTo("#sightings");

Немного более подробный, но вы можете поместить последние три в одну длинную строку, если хотите... Я думаю, что это более читаемо и в конечном итоге дает вам больше контроля, потому что технически вы не должны писать кучу HTML в js, вы можете создавать элементы и добавлять их, но, если писать большие блоки разметки, я думаю, что создание элементов в виде объектов, подобных этому, дает вам большую гибкость.

Вы также можете присоединить события к элементам, добавленным следующим образом:

$(sighting).bind("click", function(event) {
  $(this).fadeOut();
});

Ответ 2

Попробуйте следующее:

var sighting = "<div><span class=\"feed_name\"></span></div>",
    $elem = $(sighting).find("span.feed_name").text("hello world").parent();
$("#sightings").append($elem);

Вызов parent необходим, чтобы вернуться к внешнему div.