HTML Appending with jQuery

HTML Appending with jQuery

本文关键字：jQuery with Appending HTML      更新时间：2023-09-26

追加的方法太多了

我有三个例子:

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

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

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

我认为

  1. 是最简单的
  2. 一样…
  3. ? ?

你能告诉我应该做哪一个吗?

更重要的是上下文而不是哪个更好。

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

从本质上讲，它们的目的是相同的:即将一个元素附加到另一个元素中。

.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>

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

链接时的区别

但是考虑到动态创建的元素，我会选择第三个。因为这样更清晰可读…

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

Well append比appendTo更快，但只适用于大型编辑。

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

根据jquery文档

基本上append()和appendTo()的作用是一样的

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

相关文章：