14

In JQuery when trying to access elements, I see that if I have a form (lets say a textarea), and I want to get the text inside of it, I must use $("textarea").val();

Instead if I have a h1 element, I must use $("h")[0].innerHTML;

Why is this the case? h1.val()/textarea.innerHTML do not work

K Split X
  • 3,405
  • 7
  • 24
  • 49
  • 3
    Only form control elements have `value` property, most of the other elements have `innerHTML`. There's a jQuery version of `innerHTML` though, `$("h1").html()`. – Teemu Dec 27 '16 at 20:13

5 Answers5

19

.val() is used to get/replace input elements values in jQuery, alternative in JS is .value.

innerHTML or jQuery's .html() is used to get/replace the whole markup inside an element, not input elements.

text() is used almost the same as JS innertHTML, only it gets/replaces the text inside an element, not all the tags etc. It's bassically the equivalent of JS innerText

Reference links about innerHTML, innerText, val(), text(), html()

Ionut Necula
  • 11,107
  • 4
  • 45
  • 69
1

textarea.innerHTML actually will work to get the html content of the textarea as it's initially rendered, whereas val() will get the current value based on user input. val() as others have stated only works on form elements so it would have no result for an <h1>.

$('textarea').on('input', function() {
  $('#innerhtml').text(this.innerHTML);
  $('#val').text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Type in the textarea below to see results:
<br>
<textarea>test123</textarea>
<div>textarea innerHTML:</div>
<div id="innerhtml"></div>
<div>textarea val:</div>
<div id="val"></div>
But those new buttons though..
  • 21,377
  • 10
  • 81
  • 108
0

you could use h1.text() or h1.html() which map to innerText and innerHTML respectively.

As for val() that maps to input.value.

Using the jquery equivalents gives you cross-browser compatibility, although that's probably more of a historic relic. New browsers probably implement these features the same way.

As a general rule: value is used on input elements, innerHTML on non-input fields.

Geert-Jan
  • 18,623
  • 16
  • 75
  • 137
  • That doesn't explain why you need to use `.val` though. – Felix Kling Dec 27 '16 at 20:15
  • Are .text / .html functions ? I try using them in the console but it says they arent – K Split X Dec 27 '16 at 20:16
  • `console.log($("h1").text());` works, but `console.log($("h1")[0].text());` doesnt – K Split X Dec 27 '16 at 20:17
  • @ksplitx: correct. jquery function `text()` etc work on jquery elements. (`$("h1")` in this case). When doing `$("h1")[0]` you reference the first underlying domElement that is referred to by the jquery-element. You could go both ways, however jquery adds an abstraction layer on top of the bare dom elements to make it easier for you. You could still use `$("h1")[0].xyz` if you really wanted to – Geert-Jan Dec 27 '16 at 20:21
  • You could do `$("h1").html()` which is the same as doing `$("h1")[0].innerHTML`. The first option is just a shortcut for the second, IFF `$("h1")` only selects 1 element. – Geert-Jan Dec 27 '16 at 20:29
  • *"Instead h1.innerHTML and h1.innerText are read-only."* That's not correct. You can assign to `innerHTML` and `innerText` (note that `innerText` is not standard). – Felix Kling Dec 27 '16 at 20:34
  • @FelixKling That is what I was thinking too, but actually [innerText seems to be standard now](https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute). – Teemu Dec 27 '16 at 20:37
0

Because all the inputs in Html have val() and they can send their values to be processed by a form, such as textarea, text, submit, ...

but tags like h1, span, ... dont participate in form and wont be processed, and also they may have inner tags and html as well.

mojtaba zangeneh
  • 141
  • 1
  • 8
-1

.val() is used to get value from input elements in jQuery. Alternative in JavaScript is .value.

.innerHTML is used to put some value between some tags. So innerHTML is a DOM property to insert content to a specified id of an element, and with .val() you just get value from some input tags.

Ivan
  • 1
  • 1