我有以下代码
var element1 = document.createElement('div');
var element2= document.createElement('a');
element1.append(element2);
不使用innerHTML我得到的错误追加不是函数??? 解决那个????
谢谢
答案 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元素数组进行操作。