javascript - 使用 jQuery 追加 HTML

Question

追加有很多方法

我有 3 个例子：

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

2. $("<div>content#2</div>").appendTo(".test2");

3. $("<div>", { text : "content#3" }).appendTo(".test3");

我认为

1. 最简单
2. 是同样的...
3. 是 ？？？

你能告诉我应该做哪一个吗？告诉我一些坏事，好事请...

Answer 1

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

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

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

.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

下面将仅隐藏<div>您附加到的新内容.test1。

.test1并且内部的其他任何东西都.test1应该保持可见。

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

Answer 2

只要append()考虑到，上述三个代码都会做同样的事情..appendTo()附加到后面提到的选择器..你可能会注意到 append() 和 appendTo() 在上下文中链接时的区别

但考虑到动态创建的元素，我会选择第三个 .. 因为它更干净易读..

考虑你需要创建 5 个或更多 .. 用方法 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..

Answer 3

好吧append 比 appendTo 快，但仅适用于大型编辑。否则没关系。

Answer 4

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

根据 jquery 文档

所以基本上 append() 和 appendTo() 都做同样的事情

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