Wann verwende ich .val() vs .innerHTML?

Question

In JQuery, wenn für den Zugriff Elemente versuchen, sehe ich, dass wenn ich eine Form (lets textarea sagen), und ich möchte die text innen von ihm bekommen, ich $("textarea").val();

Stattdessen, wenn ich eine h1 haben verwenden müssen Element, muss ich verwenden $("h")[0].innerHTML;

Warum ist das der Fall? h1.val()/textarea.innerHTML do not work

Answer 1

.val() wird zum Abrufen/Ersetzen von Eingabeelementwerten in jQuery verwendet, alternativ in JS ist .value.

innerHTML oder jQuery .html() wird verwendet, um das gesamte Markup innerhalb eines Elements zu erhalten/zu ersetzen, nicht Eingabeelemente.

text() verwendet wird, fast die gleiche wie JS innertHTML, nur wird es/ersetzt den Text innerhalb eines Elements, nicht alle Tags usw. Es ist bassically das Äquivalent von JS innerText

Referenz Links zu innerHTML, innerText, val(), text(), html()

Answer 2

könnten Sie h1.text() oder h1.html(), die jeweils innerText und innerHTML Karte verwenden.

Für val(), die auf input.value abbildet.

Die Verwendung der jquery-Entsprechungen bietet Ihnen Cross-Browser-Kompatibilität, obwohl das wahrscheinlich eher ein historisches Relikt ist. Neue Browser implementieren diese Funktionen wahrscheinlich auf die gleiche Weise.

Als allgemeine Regel gilt: value wird für Eingabeelemente verwendet, innerHTML für Nicht-Eingabefelder.

Answer 3

Da alle Eingänge in Html haben val(), und sie können durch eine Form, wie zum Beispiel Textbereich, Text vorlegen, ...

aber Tags wie h1, spannt, ihre Werte zu verarbeiten senden. .. nicht in Form teilnehmen und nicht verarbeitet werden, und sie können auch innere Tags und HTML haben.

Answer 4

.val() wird verwendet, um den Wert von Eingabeelementen in jQuery abzurufen. Alternative in JavaScript ist .value.

.innerHTML wird verwendet, um einen Wert zwischen einigen Tags zu setzen. Also innerHTML ist eine DOM-Eigenschaft zum Einfügen von Inhalt in eine angegebene ID eines Elements, und mit. Val() erhalten Sie nur Wert von einigen Eingabe-Tags.

Answer 5

textarea.innerHTML tatsächlich wird Arbeit den HTML-Inhalt des Textbereiches zu erhalten, wie es am Anfang gemacht hat, während val() den aktuellen Wert erhalten, basierend auf Benutzereingaben. val() wie andere angegeben haben funktioniert nur auf Formularelemente, so würde es kein Ergebnis für eine <h1> haben.

$('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>