如何在jQuery变量中操作HTML？

Question

我试图操纵存储在jQuery变量中的HTML.我想在将变量写入文档之前进行此操作.

所以,我有一个变量定义为:

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

我想把"你好世界"放在span元素中.这是我无法工作的部分:

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

然后我将'sighting'变量写入页面:

$(#sightings).append(sighting);

这将HTML中的目标变量放入<div id="sightings"></div>页面上的元素中.

任何帮助将不胜感激!

谢谢,

标记

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

如果你想要的话,你可以将最后三行串成一条长行...我认为这更具可读性并最终为你提供更多控制权,因为从技术上讲你不应该在你的js中写一堆HTML ,你可以创建元素并附加它们,但是就编写大块标记而言,我认为将元素创建为这样的对象可以提供更大的灵活性.

您还可以以更简单的方式将事件附加到像这样添加的元素:

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

Answer 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。