如何在 jQuery 变量中操作 HTML？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2352072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to manipulate HTML within a jQuery variable?
提问by Mark
I am trying to manipulate the HTML stored within a jQuery variable. I want to do this manipulation before I write the variable to the document.
我正在尝试操作存储在 jQuery 变量中的 HTML。我想在将变量写入文档之前进行此操作。
So, I have a variable defined as:
所以，我有一个变量定义为：
var sighting = "<div><span class="feed_name"></span></div>";
And I want to put "hello world" in the spanelement. This is the part that I can't get to work:
我想在span元素中加入“hello world” 。这是我无法开始工作的部分：
$(sighting).("span.feed_name").html(name);
Then I write the 'sighting' variable to the page:
然后我将“瞄准”变量写入页面：
$(#sightings).append(sighting);
Which puts the HTML in the sighting variable into the <div id="sightings"></div>element on the page.
它将瞄准变量中的 HTML 放入<div id="sightings"></div>页面上的元素中。
Any help would be greatly appreciated!
任何帮助将不胜感激！
Thanks,
谢谢，
Mark
标记
回答by JP Silvashy
I prefer this method, you'll have more control over the elements because they remain as objects, and are thus easier to coerce into functions.
我更喜欢这种方法，您将对元素有更多的控制权，因为它们仍然是对象，因此更容易强制转换为函数。
sighting = document.createElement('div');
Then you can manipulate as if it was already part of the DOM
然后你就可以操作了，就好像它已经是 DOM 的一部分一样
$(sighting).addClass("feed_name").html(name);
$(sighting).appendTo("#sighting");
EDIT
编辑
Hmm... it seems I misread your question. I would still prefer to make the elements using the createElement()function.
嗯...看来我误读了你的问题。我仍然更喜欢使用该createElement()函数制作元素。
sighting = document.createElement('div');
sighting_contents = document.createElement('span');
$(sighting_contents).addClass("feed_name").html(name);
$(sighting).append(sighting_contents);
$(sighting).appendTo("#sightings");
A little more verbose, but you can string the last three into one long line if you want... I think this is more readable and ultimately gives you more control, because technically you shouldn't be writing a bunch of HTML in your js, you can create the elements and append them, but as far as writing big blocks of markup I think creating the elements as objects like this gives you more flexibility.
有点冗长，但如果你愿意，你可以将最后三个串成一个长行......我认为这更具可读性并最终给你更多的控制，因为从技术上讲你不应该在你的 js 中编写一堆 HTML ，您可以创建元素并附加它们，但就编写大块标记而言，我认为将元素创建为这样的对象可以为您提供更大的灵活性。
You can also attach events to elements added like this in a more simple way:
您还可以以更简单的方式将事件附加到像这样添加的元素上：
$(sighting).bind("click", function(event) {
$(this).fadeOut();
});
回答by Gumbo
Try this:
尝试这个：
var sighting = "<div><span class=\"feed_name\"></span></div>",
$elem = $(sighting).find("span.feed_name").text("hello world").parent();
$("#sightings").append($elem);
The parentcall is needed to get back to the outer div.
在parent需要调用来获取返回到外层div。
