javascript - jQuery，对象没有方法 'innerHtml'

Question

我回问了一个问题并得到了一些有用的建议。我正在尝试制作一个可排序列表，允许用户将 youtube url 添加到列表中。我将其设置为获取 id 并将其放入数组中，然后我希望它使用以下 javascript 将视频 url 和“提示”链接 append 到列表:

    _videoId = _videoUrl.replace(/^[^v]+v.(.{11}).*/,"$1");
//place the Videoid in an array
_videoList[_videoList.length] = _videoId;
var $new_element = document.createElement('li');
//set the id of the li element to match it's position in the array
var refId = _videoList.length;
$new_element = $('li').attr('id', refId);
var $link = $('a')
.attr('href', _videoUrl)
.innerHtml(_videoUrl)
.data('refId', refId) // add parent li's id for reference in click event
.appendTo( $new_element )
.bind( 'click', function(){
    cue( $link.data('refId') );
    return false; // prevent browser's default click event
});

$new_element.appendTo( container );

但是它给我一个错误(在 chrome 中)

Object [object Object] has no method 'innerHtml'

我的 HTML 看起来像这样:

<div id="hostPanel">
        <div id="videoList">
        <ul id="sortable">

        </ul>
        </div>

任何帮助让它工作的帮助都很好。

Answer 1

innerHtml 是 DOM 元素的属性，而不是 jQuery 对象的方法。使用 html()相反。

---

编辑:

关于评论:

$new_element = $('li').attr('id', refId);

这不会创建新的 <li> - 元素，它采用现有的 <li> -文档中的元素。

要在 jQuery 中创建一个新元素，请使用

$new_element = $('<li/>').attr('id', refId);

这里也是一样的:

var $link = $('a')

...必须是

var $link = $('<a/>')

不要混用 jQuery 和 Javascript(DOM)

这是创建元素的 Javascript(DOM) 方式:

var $new_element = document.createElement('li');

jQuery 需要 $() 的标记而 DOM 方法 createElement()需要一个 tagName 作为参数。