テキストの追加/JavaScript

JavaScriptで、HTML中にテキスト(文字)を追加するサンプルコードです。

最初に簡単なサンプルを示します。ページの下に行く程複雑になりますが、より柔軟にテキストを追加できます。

目次は、以下の通りです。

  1. 簡単にテキストを追加する
  2. 要素から作成する
  3. 要素の途中に追加する
  4. 補足

簡単にテキストを追加する

 簡単にテキストを追加するデモです。

 ボタンをクリックすると、テキストが追加されます。サンプルコードは、以下の通りです。

【テキストを追加するサンプルコード】
<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の最後に追加しています。

要素から作成したテキストを表示するJavaScriptのフロー

 実行した時の表示は、最初のデモと同じです。要素を事前に作成していなくてもテキストを追加出来ますが、指定した要素(今回の場合は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要素を追加しています。

要素の途中にテキストを表示するJavaScriptのフロー

 このため、「要素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」をご参照下さい。

  • このエントリーをはてなブックマークに追加