Search code examples
javascriptjqueryfunctionouterhtml

Trying to move a div but getting "outerhtml is not a function"

I'm moving lots of elements around a page, I have no access to the html so I'm doing it with javascript. Moving the innerhtml of a div is working fine, but if I want the whole div not just the inner contents I understand i probably want outerhtml. When I use this in my code however I get the console error "outerHTML is not a function".

Moves the inner html just fine:

function moveStuff () {
  idx('#IDX-description').after(idx('#IDX-field-extras').html()); 
  idx('#IDX-field-extras').remove();
  setTimeout(moveStuff, 1000);
}

Gets the console error:

function moveStuff () {
  idx('#IDX-description').after(idx('#IDX-field-extras').outerHTML()); 
  idx('#IDX-field-extras').remove();
  setTimeout(moveStuff, 1000);
}
Solution

  • In order to convert jQuery objects to DOM elements you need to access it as an array:

    idx('#IDX-description').after(idx('#IDX-field-extras')[0].outerHTML);
//                                                     ^
//                                                     |
//                note the conversion -----------------'

    Also note that unlike jQuery's .html() the DOM API .innerHTML and .outerHTML are not functions, they're just attributes (actually getters and setters)