使用jQuery追加HTML内容

Question

使用jQuery追加HTML内容

javascriptjqueryhtmlappend

4

有很多方式来添加内容，以下是3个例子：

$(".test1").append("<div>content#1</div>");
$("<div>content#2</div>").appendTo(".test2");
$("<div>", { text : "content#3" }).appendTo(".test3");

我认为：

最简单的是第一个例子。
第二个例子和第一个一样。
第三个例子是什么鬼？

你能告诉我应该选择哪一个吗？并且告诉我一些好的方面和坏的方面吗？

- l2aelba

2

无论你喜欢哪个，它们之间没有太大的区别，你也不需要担心任何性能问题。 - Selvakumar Arumugam

@Vega 你确定吗？第三种方法将是最快速和最可靠的方式：它不进行字符串解析，并且可以处理不安全的属性和属性值。 - VisioN

2

除非你要在循环中重复这个动作1000次或者其他什么情况下，否则不需要这样做。 - techfoobar

3

第一个返回选择器，第二个和第三个返回已添加的元素。 - Reinstate Monica Cellio

这只是我的想象，还是人们对这种事情担心太多了？只要你完成了它，并且不是一个愚蠢的方式，就用你能记住的最简单的方式去做。 - user527892

显示剩余2条评论

4个回答

1

所有上述三个代码只要考虑到append()，就会执行相同的操作。 appendTo()会附加到稍后提及的选择器..您可能会注意到在链接方面，append()和appendTo()之间的差异是上下文。但考虑到动态创建的元素，我会选择第三种方法..因为它更清晰易读..假设您需要创建5个或更多的divs..使用方法1和2创建会看起来很混乱。

 $(".test1").append("<div>content#1</div><div>aaa</div><div>sss</div>...");

使用第三种方法更加简洁易读。

var div1=$("<div>", { text : "content#3" });
var div2=$("<div>",...); and so on..

- bipen

0

对于大型编辑，append比appendTo更快，但否则没有区别。

- Useless Intern

请添加一些解释您链接的上下文，并查看以下文章：只包含其他链接的答案真的是好答案吗。 - War10ck

0

.append()和.appendTo()方法执行相同的任务。主要区别在于语法，特别是内容和目标的放置位置。使用.append()方法时，方法之前的选择器表达式是将内容插入其中的容器。另一方面，使用.appendTo()方法时，内容在方法之前，可以作为选择器表达式或即时创建的标记，并将其插入到目标容器中。

根据jQuery文档

因此，基本上append()和appendTo()都执行相同的操作。

我个人更喜欢使用append()而不是appendTo()。

- syed imty

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Terry Young · Accepted Answer

更多的是看上下文而不是哪个更好。

只有在极端情况下才会看到性能差异，这不是您在典型网站上会注意到的。

本质上它们的目的相同：即将一个元素添加到另一个元素中。

.append()和.appendTo()之间的区别体现在您进行方法链接时。

var $whatIsThis = $(".test1").append("<div>content#1</div>");

$whatIsThis 仍然是 $(".test1")。

var $whatIsThis = $("<div>content#1</div>").appendTo(".test1");

$whatIsThis将被替换为您刚创建的<div>。

既然提到了方法链接，这里有一个示例

下面的代码将隐藏.test1。由于新的<div>将在其中，两者都将不可见。

$(".test1") // this is me
    .append("<div>content#1</div>")
    .hide(); // hide me, I'm .test1

下面的代码将只隐藏您添加到.test1中的新<div>。

.test1和.test1内部的任何其他内容应保持可见。

$("<div>content#1</div>") // this is me
    .appendTo(".test1")
    .hide(); // hide me, I'm the new <div>