8

So as far as I can tell, if I have

<div id="thing">OMG there's awesome stuff in here</div>

and need to plant that html somewhere else, I have the option of using:
$('#thing').html(); or $('#thing').get(0);

Is there a greater internet standard in using one or the other? They do the exact same thing, right?

Thanks for the help!

James Montagne
  • 77,516
  • 14
  • 110
  • 130
OldDrunkenSailor
  • 338
  • 1
  • 5
  • 20
  • Just to clarify, you are trying to remove that element from its parent node, then append it elsewhere in the DOM tree, correct? – abelito Nov 17 '11 at 00:23
  • `.html()` serializes a DOM structure, `get(0)` retrieves a DOM reference. As you can see, those two do completely different things. Btw [DOM serialization should be avoided](http://stackoverflow.com/questions/7392930/why-should-y-innerhtml-x-innerhtml-be-avoided). – Šime Vidas Nov 17 '11 at 00:58

8 Answers8

16

They do the exact same thing, right?

Wrong. The html method returns the contents of the selected element, as a string. The get method returns the element itself, as an object. For example, we have this element:

<div id="example">
    <span>A child element</span>
</div>

The methods would return the following:

console.log($("#example").html()); //Prints "<span>A child element</span>"
console.log($("#example").get(0)); //Prints an object

You can try that for yourself here.

James Allardice
  • 164,175
  • 21
  • 332
  • 312
8

.get(0) will give you the first element in the jquery object, not the HTML within that. You would then need to get the html. If you're using jquery, use jquery. I see no reason not to use .html().

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • 1
    I'm an idiot, .html() gets you the innerHTML, .get(0) gets you the html element in its entirety. – OldDrunkenSailor Nov 17 '11 at 00:20
  • @JamesMontagne you said, "If you're using jquery, use jquery. I see no reason not to use `.html()`". But `.html() _is_ jQuery and definitely has its uses. We really don't know what the OP wants here. – JAAulde Nov 17 '11 at 00:23
  • @jaa Yes I did... what I meant was use `.html`, why would you use `get` and get the dom element. I wasn't saying don't use `.html`. After re-reading the question, I had taken "some html" to mean the actual html and not the element, but it very well could have been a misuse of terms and he could want to move the dom element, in which case probably neither should be used. – James Montagne Nov 17 '11 at 00:24
  • @JamesMontagne Sorry, I misread you to say, "I see NO REASON to use .html()." Sorry! – JAAulde Nov 17 '11 at 00:29
4

These two things do close to the same thing (note the addition of .innerHTML to what you had in your question):

$('#thing').html();

$('#thing').get(0).innerHTML;

The first creates a jQuery object, then calls the .html() method on it (which in turns gets the HTML from the .innerHTML property).

The second creates a jQuery object, then gets the first DOM element out of it and gets the innerHTML property from it.

In general, if you already have a jQuery object, then use .html(). If you already have a DOM object, then use .innerHTML.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
2

If you want to duplicate some elements, do not use html. It is a very inefficient way of cloning elements. There is a much better way, called clone (funnily enough):

$('#thing').clone(true).removeProp('id').appendTo('#someOtherElement');

Note that I am removing the id property, as it must be unique.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318
1

No, they do not do the exact same thing.

.html() returns HTML string representing the DOM structure inside the element contained within the jQuery collection object: "OMG there's awesome stuff in here".

.get(0) returns the first DOM element object from the collection, in this case a DOM node of tag-type DIV with ID "thing" and child text-node with value "OMG there's awesome stuff in here"

JAAulde
  • 19,250
  • 5
  • 52
  • 63
0

I've only used .html() and I work for a firm. I have never seen .get(0) used for anything like this

Kai Qing
  • 18,793
  • 5
  • 39
  • 57
0

They are fairly different. The get method returns a DOM element while html() returns a string. Here it looks like you want the HTML so use html()

JaredPar
  • 733,204
  • 149
  • 1,241
  • 1,454
0

These two methods are different

get() Retrieve the DOM elements matched by the jQuery object. See: http://api.jquery.com/get/

html() Get the HTML contents of the first element in the set of matched elements. See: http://api.jquery.com/html/

mikeycgto
  • 3,368
  • 3
  • 36
  • 47