Question

我有以下代码

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

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

谢谢

Answer 1

jQuery有append，原生DOM使用appendChild：

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

Answer 2

append是一个jQuery方法。

对DOM元素使用appendChild()。

Answer 3

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

 $(element1).append(element2);

Answer 4

你已经有了问题的解决方案（使用普通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元素数组进行操作。

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

4 个答案: