有很多方式来添加内容,以下是3个例子:
$(".test1").append("<div>content#1</div>");
$("<div>content#2</div>").appendTo(".test2");
$("<div>", { text : "content#3" }).appendTo(".test3");
我认为:
- 最简单的是第一个例子。
- 第二个例子和第一个一样。
- 第三个例子是什么鬼?
你能告诉我应该选择哪一个吗?并且告诉我一些好的方面和坏的方面吗?
有很多方式来添加内容,以下是3个例子:
$(".test1").append("<div>content#1</div>");
$("<div>content#2</div>").appendTo(".test2");
$("<div>", { text : "content#3" }).appendTo(".test3");
我认为:
你能告诉我应该选择哪一个吗?并且告诉我一些好的方面和坏的方面吗?
更多的是看上下文而不是哪个更好。
只有在极端情况下才会看到性能差异,这不是您在典型网站上会注意到的。
本质上它们的目的相同:即将一个元素添加到另一个元素中。
.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个或更多的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..