Question

I asked a question a bit back and got some useful advice. I am trying to make a sortable list that allows the user to add a youtube url to the list. I have it set to take the id and put it in an array, I then want it to use the following javascript to append the video url and a “cue” link to the list:

    _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 );

However it is giving me an error (in chrome)

Object [object Object] has no method ‘innerHtml’

my HTML looks like this:

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

        </ul>
        </div>

Any help on getting this to work could be nice.

Answer 1

innerHtml is a property of DOM-elements, not a method of jQuery-objects. Use html() instead.

---

Edit:

Regarding to the comment:

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

This doesn’t create a new <li>-element, it takes the existing <li>-elements inside the document.

To create a new element in jQuery use

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

It’s the same here:

var $link = $('a')

…has to be

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

Don’t mix jQuery and Javascript(DOM)

This is the Javascript(DOM)-way to create an element:

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

jQuery expects markup for $() while the DOM-method createElement() expects a tagName as parameter .