簡単にテキストを追加する
簡単にテキストを追加するデモです。
ボタンをクリックすると、テキストが追加されます。サンプルコードは、以下の通りです。
【テキストを追加するサンプルコード】
<button type="button" onclick="func1();">追加</button>
<span id="test1"></span>
<script>
function func1() {
var x = document.getElementById("test1");
x.innerHTML = "JavaScriptで追加";
}
</script>
赤字分部は空のテキストです。ボタンがクリックされるとfunc1が呼び出され、青字部分でテキストが「JavaScriptで追加」に置き換わります。
innerHTMLは改行として<br>が使えます。タグを解釈させたくない時は、青字分部をx.textContent = "JavaScriptで追加";等にします。x.textContentもテキストを置き換えます。
この方法は、<span>でなくても<div>や<p>等でも使えます。使い方も簡単ですが、空の要素(span等)を用意しておく必要があり、表示場所が決まっている時しか使えません。
要素から作成する
空の要素がない時、要素から作成してテキストを追加させる事も出来ます。
【要素から作成してテキストを追加するサンプルコード】
<div id="test2">
<button type="button" onclick="func2();">追加</button>
</div>
<script>
function func2() {
var text1 = document.createElement("span");
text1.innerHTML = "JavaScriptで追加";
var x = document.getElementById("test2");
x.appendChild(text1);
}
</script>
赤字分部は、span要素を作成しています。createElementはspanだけでなく、divやp等様々な要素を作成出来ます。
青字部分は、作成したspanのinnerHTMLプロパティにテキストを書き込んでいます。緑字部分では、span要素をid="test2"の子ノードとして定義し、divの最後に追加しています。
実行した時の表示は、最初のデモと同じです。要素を事前に作成していなくてもテキストを追加出来ますが、指定した要素(今回の場合はid="test2")の最後しか追加出来ません。
要素の途中に追加する
要素の途中に追加する事も出来ます。
【要素の途中にテキストを追加するサンプルコード】
<button type="button" onclick="func3();">追加</button>
<div id="test3">
<p>要素0</p>
<p>要素1</p>
</div>
<script>
function func3() {
var text1 = document.createElement("span");
text1.innerHTML = "JavaScriptで追加";
var x = document.getElementById("test3");
var y = x.getElementsByTagName("p")[1];
x.insertBefore(text1, y);
}
</script>
赤字分部は先ほどと同じで、span要素を作成し、innerHTMLプロパティにテキストを書き込んでいます。
青字部分は、div内にあるp要素の1番目(0から数える)をオブジェエクトとして参照し、insertBeforeによりその前にspan要素を追加しています。
このため、「要素0」と「要素1」の間にspan要素が追加され、「JavaScriptで追加」と表示されます。
尚、x.getElementsByTagName("p")[1]の[]内の数字を変える事で、追加する場所を変更出来ます。
又、x.insertBefore(text1, y.nextSibling);と記述する事で、「要素1」の後に追加する事も出来ます。
補足
テキストを追加するだけなら、document.write("テスト");等で出来ます。又、document.write("<p>テスト</p>");と記述すれば、タグも利用出来ます。但し、document.writeをHTML中の追加したい所に記述する必要があります。
本項では、DOM(Document Object Model)を利用して、HTMLの任意の場所にテキストを追加しています。詳細は、「DOM」をご参照下さい。