如何使用jQuery追加两个创建的html元素

时间:2015-05-15 16:32:29

标签: javascript jquery html dom

我有以下代码

   var element1 = document.createElement('div');
   var element2= document.createElement('a');
   element1.append(element2);

不使用innerHTML我得到的错误追加不是函数??? 解决那个????

谢谢

4 个答案:

答案 0 :(得分:6)

jQuery有append,原生DOM使用appendChild

var element1 = document.createElement('div');
var element2= document.createElement('a');
element1.appendChild(element2);

答案 1 :(得分:5)

append是一个jQuery方法。

对DOM元素使用appendChild()

答案 2 :(得分:4)

因为element1是DOM对象。您需要将其转换为jquery对象才能使用方法.append()

 $(element1).append(element2);

答案 3 :(得分:1)

你已经有了问题的解决方案(使用普通DOM元素element1.appendChild(element)),但我想我会解释导致你混淆的jQuery的某些方面。

仅限DOM方法

DOM对象(例如您使用document.createElement('div');创建的对象)附加了DOM方法。有许多不同的DOM方法,但用于附加子对象的DOM方法是.appendChild(),而不是.append(),这导致了您的混淆。因此,只要您只使用纯DOM对象(不涉及jQuery),那么您坚持使用纯DOM方法并使用.appendChild(),如下所示:

var element1 = document.createElement('div');
var element2= document.createElement('a');
element1.appendChild(element2);

仅限jQuery方法

jQuery,创建自己的一组方法,这些方法附加到jQuery对象(而不是DOM对象)。因此,如果使用$(...)创建jQuery对象,则只在该对象上使用jQuery方法。在jQuery对象上,有一个.append()方法(可能会导致您的混淆)。

所以,使用jQuery,你可以做到:

var elem1 = $("<div>").append($("<a>"));

或者,即使只是这个(我在这里为<a>标签显示更完整的HTML):

var elem1 = $("<div><a href='http://www.google.com'>Click here</a></div>")

<强>摘要

因此,在调用方法时,请记住,如果您的对象是DOM对象,那么您可以在其上调用DOM方法:

element1.appendChild(element2);

或者,如果您的对象是jQuery对象,那么您可以在其上调用jQuery方法:

var elem1 = $("<div>").append($("<a>"));

或者,如果您想使用jQuery方法,实际上可以将任何DOM对象包装在jQuery对象中,例如:

var element1 = document.createElement('div');
var element2= document.createElement('a');
$(element1).append(element2);

jQuery允许您将jQuery对象或DOM元素作为参数传递

这最后一个方法又增加了一个令人困惑的方面,因为jQuery通常允许你将DOM元素或jQuery对象作为参数传递给方法。因此,在上面的代码片段中,element2只是一个DOM对象事件,但我们正在使用jQuery方法。 .append() jQuery方法将检查要追加的对象是DOM元素还是jQuery对象,并且将采取适当的行动。

请记住,jQuery对象只是一个DOM元素数组的对象包装器,其中包含一大堆附加到jQuery对象原型的有用方法。因此,您可以在概念上将jQuery对象视为0到n个DOM元素的数组,然后方法只对jQuery对象包含的整个DOM元素数组进行操作。