Question

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

所以，我有一个变量定义为：

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

我想在span元素中添加“hello world”。这是我无法工作的部分：

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

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

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

$(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。

如何在jQuery变量中操作HTML？

2 个答案: