element.innerTextは、「element」に指定した要素内のテキストを取得、もしくは、設定するプロパティ。
※ 2013年7月28日現在、下記「サンプル」は、FireFoxとChromeでは動作せず。IE10でのみ動作を確認。
構文
取得
var $innerText = $elementNodeReference.innerText;
戻り値
指定した要素内のテキスト。
設定
$elementNodeReference.innerText = テキストコンテンツ;
サンプル
サンプル：1
id属性がsampleである要素内のテキスト：
変更後：
サンプルの動作について
- 「getText()」ボタンをクリックすると、「id属性がsampleである要素内のテキスト：」の右横に「1」と表示する。
- 「setText()」ボタンをクリックすると、「サンプル：」と「変更後：」の右横に「2」と表示する。
- 再度、「getText()」ボタンをクリックすると、「id属性がsampleである要素内のテキスト：」の右横に「2」と表示する。
- 「setText()」ボタンをクリックする度に、id属性がsampleである要素内のテキストを、「2、3、4」のようにカウントアップする。
- 「getText()」ボタンをクリックすると、id属性がsampleである要素内の現在のテキストを、「id属性がsampleである要素内のテキスト：」の右横に表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $count = 1;
function getText() {
var $elementNodeReference = document.getElementById( "sample" );
var $innerText = $elementNodeReference.innerText;
document.getElementById( "sampleOutput1" ).innerText = $innerText;
}
function setText() {
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.innerText = ++$count;
var $innerText = $elementNodeReference.innerText;
document.getElementById( "sampleOutput2" ).innerText = $innerText;
}
</script>
var $count = 1;
function getText() {
var $elementNodeReference = document.getElementById( "sample" );
var $innerText = $elementNodeReference.innerText;
document.getElementById( "sampleOutput1" ).innerText = $innerText;
}
function setText() {
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.innerText = ++$count;
var $innerText = $elementNodeReference.innerText;
document.getElementById( "sampleOutput2" ).innerText = $innerText;
}
</script>
HTML
<p>サンプル：<span id="sample">1</span></p>
<button onclick="getText();">getText()</button>
<p>id属性がsampleである要素内のテキスト：<span id="sampleOutput1"></span></p>
<button onclick="setText();">setText()</button>
<p>変更後：<span id="sampleOutput2"></span></p>
<button onclick="getText();">getText()</button>
<p>id属性がsampleである要素内のテキスト：<span id="sampleOutput1"></span></p>
<button onclick="setText();">setText()</button>
<p>変更後：<span id="sampleOutput2"></span></p>