Question

这是我的简单HTML：

<body>
    <div id="myParentDivElement">
        Hello World!
    </div>
</body>

以下是随附的JavaScript：

$(document).ready(function() {
    var myDOMElement = document.getElementById("myParentDivElement");

    var newDivID = "div_1";
    var newDiv = $('<div id="' + newDivID + '"/>');
    $( newDiv ).css('marginLeft', '50px');

    var newSpanID = "span_1";
    var newSpan = $('<span id="' + newSpanID + '"/>');
    newSpan.text('myLabel');
    newDiv.appendChild(newSpan);   
    $( myDOMElement ).appendChild(newDiv);
});

但是当我运行此代码时，行newDiv.appendChild(newSpan);会出现以下错误：

Uncaught TypeError: undefined is not a function

有人可以解释原因吗？这是JSFiddle显示它不起作用：http://jsfiddle.net/TsTMx/2/

Answer 1

.appendChild()是一个简单的JavaScript方法，而不是jQuery。 jQuery方法是.append()。

newDiv.append(newSpan);   
$( myDOMElement ).append(newDiv);

Answer 2

newDiv是一个jQuery对象，而不是DOM对象。

jQuery对象没有an appendChild method，他们有an append method.

Answer 3

使用.append()

newDiv.append(newSpan);

.appendChild()适用于DOM元素。 newDiv是jQuery Object，不是普通的JavaScript DOM元素。

<强> Working Fiddle

为什么调用jQuery的appendChild会因未定义的错误而失败？

3 个答案: