私を幸せにすることを学ぶ

innerHTML、innerText、textContent、およびJqueryのText（）、html（）、val（）



Text Html Val Innerhtml



1.innerHTML

innerHTMLは、要素タグの先頭からコンテンツ全体（htmlタグを含む）の末尾まで、指定された要素タグ内のhtmlコンテンツを取得または設定できます。



要素のコンテンツを取得します：element.innerHTML
要素のコンテンツを設定します：element.innerHTML = htmlString

コード例は次のとおりです。



Get the innerHTML of paragraph p

document.getElementById('test').innerHTML The output is: Get the innerHTML of paragraph p

Javascriptはノードのテキスト値を取得します。
（1）document.getElementById（ ‘test’）。innerHTMLを書き込むネイティブjs
（2）$（ ’＃test’）。html（）を書き込むjQuery

outsideHTML：



innerHTMLのコンテンツ全体に加えて、オブジェクトタグ自体も含まれています。

test1 test2 //test.innerHTML “test1 test2 ” //text.outerHTML test1 test2

2.innerText

innerTextは、要素タグの先頭からテキストコンテンツ全体の末尾（htmlタグなし）まで、指定された要素タグ内のテキスト値を取得または設定します。

要素のコンテンツを取得します：element.innerText
要素のコンテンツを設定します：element.innerText = string

コード例は次のとおりです。

Get the innerHTML test for paragraph p

document.getElementById('test').innerHTML The output is: get the innerHTML test of paragraph p

3.textContentとinnerText

innerTextはIEのプライベート実装ですが、FF以外のブラウザーでも実装されています。 textContentはw3cの標準APIであり、IE9も実装されています。

それらは2つのポイントがある場合にのみ異なります
1.innerTextはスクリプトタグでソースコードを返すことができません。textContentは、textContentをサポートしていないブラウザでは、代わりにtextとinnerHTMLを使用できます。
2.textContentは空白行、スペース、改行を保持し、innerTextは改行のみを保持します。

参考記事： https://www.cnblogs.com/rubylouvre/archive/2011/05/29/2061868.html

4.value属性

プロパティは、パスワードフィールドのデフォルト値を設定または返すことができます。テキストボックスの値を取得します。

value属性は、入力要素の値を設定します。

value属性の使用法は、入力タイプごとに異なります。
1.type =“ button”、“ reset”、“ submit”-ボタンに表示されるテキストを定義します
2.type =“ text”、“ password”、“ hidden”-入力フィールドの初期値を定義します
3.type =“ checkbox”、“ radio”、“ image”-入力に関連付けられた値を定義します

5.Jquery text（）、html（）、val（）

Js get text, html, attribute value, value method: document.getElementById('test').innerText； document.getElementById('test').innerHTML； document.getElementById('test').id； document.getElementById('test1').value jQuery gets text, html, attribute value, value method: $('#test').text() or $('#test').innerText $('#test').html() or $('#test').innerHTML $('#test').attr('id') $('#test').attr('value') or $('#test1').val() or $('#test1').value

参照できます：
https://www.cnblogs.com/jongsuk0214/p/6930876.html
https://www.cnblogs.com/mlbblkss/p/7135871.html
https://www.cnblogs.com/rubylouvre/p/4321442.html