Why is innerHTML returning 'undefined'?

Question

I'm trying to catch the "value" inside this div, which is editable:

<div class="editable-div" contentEditable="true">Hey</div>

I figured I could do this simply via JavaScript:

var changedText = $('.editable-div').innerHtml

However, this variable will always return "undefined", which confuses me.

Can someone enlighten me on how to reach this "value"?

Answer 1

It is jQuery - you have to use:

$('.editable-div').html()

Answer 2

A jQuery wrapped object is actually not the raw DOM node, but essentially an array of raw DOM nodes that can be acted upon with jQuery specific methods, such as .html(). If you want to interact with the DOM node, you can retrieve it by either iterating through the list or getting the element of that list if you know which one it is:

$('div').each(function(index, element) {
  element.innerHTML // ...
}

$('div').get(0).innerHTML
$('div')[0].innerHTML

Note that while it is "kind of" like an array, in that you can get DOM nodes using the array syntax of $('div')[0], you can't treat it like an array in Javascript. In other words, you can't do this:

$('div').forEach(function(element) {
  element.innerHTML
}