I've seen people with this problem before here but none of the answers helped me understand my issue better.

I have a sorting function that isn't sorting elements attached to the DOM, but giving an error in the console: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I don't understand why beyond the fact that it can't append the objects to the DOM because they're of different types.

function sorting(){
  $('#sort_by a').click(function(e){
    var sortAttr = $(this).attr('href').slice(1);
    e.preventDefault()

    var bands = $('#results').children();

    bands.sort(function (a, b) {
      if ($(a).attr(sortAttr) > $(b).attr(sortAttr)){
      return 1;
    }
    if ($(b).attr(sortAttr) > $(a).attr(sortAttr)){
      return -1;
    }
    return 0;
  });

  var appendAnim = function(items, index){
    $(items[index]).hide();
    $(items[index]).fadeIn(500);

    document.getElementById('results').appendChild(items[index])

    if(index < items.length ){
      appendAnim(items,index + 1);
    }
  }

  appendAnim(bands,0)
  return false;

  });
};

I've seen people with this problem before here but none of the answers helped me understand my issue better.

I have a sorting function that isn't sorting elements attached to the DOM, but giving an error in the console: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

I don't understand why beyond the fact that it can't append the objects to the DOM because they're of different types.

function sorting(){
  $('#sort_by a').click(function(e){
    var sortAttr = $(this).attr('href').slice(1);
    e.preventDefault()

    var bands = $('#results').children();

    bands.sort(function (a, b) {
      if ($(a).attr(sortAttr) > $(b).attr(sortAttr)){
      return 1;
    }
    if ($(b).attr(sortAttr) > $(a).attr(sortAttr)){
      return -1;
    }
    return 0;
  });

  var appendAnim = function(items, index){
    $(items[index]).hide();
    $(items[index]).fadeIn(500);

    document.getElementById('results').appendChild(items[index])

    if(index < items.length ){
      appendAnim(items,index + 1);
    }
  }

  appendAnim(bands,0)
  return false;

  });
};

• javascript
• jquery
• dom

• 1 can u create fiddle demo for this to simulate? – TechnoCrat Commented Mar 11, 2015 at 4:19

1 Answer 1

You are mixing up jQuery DOM object and native javascript DOM object.

The DOM object returns by jQuery selector (and $('#results').children() in your case) is a object created by jQuery, which is different from javascript DOM objects. Hence, you can not use it in native javascript method .appendChild(Node)

Since you're using jQuery I would suggest you to use .append() method, so change this

document.getElementById('results').appendChild(items[index])

to this:

$("#results").append(items[index])