Hikky's Room >> 動く文字（JavaScript編） >> HTML やテキストを書換える

スタイル変更

HTML やテキストを書換える

このページでは？

このページではオブジェクトとして取得した HTML 要素の中身を書換える方法を考えます。ここではDOMによる方法に加えて最近の主なブラウザでサポートされている innerHTML を使った方法も紹介します。

目次

innerHTMLを使った書換え

まず最初にW3C-DOMにはありませんが、HTML 要素の中身を参照・設定するための便利なプロパティ innerHTML を紹介します。

innerHTMLの書式

取得した HTML 要素の中身であるタグやテキストを参照・設定するには以下のように記述します。※ 下記の書式の中にあるobj はある要素オブジェクトが格納されているとします。

obj.innerHTML
obj.innerHTML = "HTMLタグおよびテキスト"

このプロパティは参照・設定する値がタグやテキストのままなので直感的に扱う事ができて便利です。

使用例

次の例はある要素の中身を参照、変更しています。

     *** BODY 要素内 ***

<P id="sampTxt2">スペインの首都は<EM>マドリード</EM>です。</P>

     *** JavaScript 部分 ***

obj = document.getElementById("sampTxt2");
cnt = obj.innerHTML;
     // sampTxt2の中身を参照
obj.innerHTML = "ポルトガルの首都は<STRONG>リスボン<\/STRONG>です。"
     // sampTxt2の中身を変更

上記の例を参考にしたサンプルを作ってみました。ボタンを交互に押して確認してみてください。

◆サンプル

スペインの首都はマドリードです。

◆ソース内容
<SCRIPT type="text/JavaScript">
<!--
var HTML1="スペインの首都は<EM>マドリード<\/EM>です。";
var HTML2="ポルトガルの首都は<strong>リスボン<\/strong>です。";
function showCapital1(){
    if(document.getElementById){
        var obj=document.getElementById("sampTxt2");
        if(typeof(obj.innerHTML)!="undefined")
                // innerHTML対応ブラウザのみ実行
            alert(obj.innerHTML);
    }
}
function setCountry1(htm){
    if(document.getElementById){
        var obj=document.getElementById("sampTxt2");
        if(typeof(obj.innerHTML)!="undefined")
                // innerHTML対応ブラウザのみ実行
            obj.innerHTML=htm;
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="sampTxt2">スペインの首都は<em>マドリード</em>です。</P>
<P>
<INPUT type="button" value="参照" onclick="showCapital1()">
<INPUT type="button" value="ポルトガル" onclick="setCountry1(HTML2)">
<INPUT type="button" value="スペイン" onclick="setCountry1(HTML1)">
</P>

DOMによる書換えは？

ここからはDOMによる方法で取得した HTML 要素の中身を書換えることを考えます。DOMでは用途ごとに様々なプロパティやメソッドが用意されていて、テキストや要素の作成・挿入・削除などの行為をそれぞれの専門のプロパティやメソッドが行っていきます。つまり、DOMでは innerHTML のようにテキストや要素、属性までも一度に書換えてくれるような方法は存在しません。

以下でいくつかのプロパティやメソッドを紹介します。

DOMによる書換関連のプロパティとメソッド

※ 下記の書式の中にあるobj はある要素オブジェクトが格納されているとします。

nodeValue

obj.指定した子ノード.nodeValue
obj.指定した子ノード.nodeValue = "文字列"

「指定した子ノード」がテキストノードならばそのノードの値である文字列を参照・設定することができます。「指定した子ノード」には childNodes[n] や firstChild などを指定します。childNodes や nodeValue についての詳細はノードの扱い方を参照ください。

使用例 → テキストノードの参照・設定

createElement

document.createElement("タグ名")

指定したタグ名の要素を作成します。このメソッドによって作成された要素は appendChild や insertBefore などによって指定された位置に挿入されます。

使用例 → 要素の追加（属性付）と削除、テキストを子ノードに持つ要素の追加と削除

createTextNode

document.createTextNode("文字列")

指定した文字列のテキストノードを作成します。このメソッドによって作成されたテキストノードは appendChild や insertBefore などによって指定された位置に挿入されます。

使用例 → テキストノードの追加と削除

appendChild

obj.appendChild(newChild)

新しいノードnewChildを子ノードのリストの末尾に追加します。

使用例 → テキストノードの追加と削除、テキストを子ノードに持つ要素の追加と削除

removeChild

obj.removeChild(oldChild)

oldChildで示される子ノードを子のリストから削除します。

使用例 → テキストノードの追加と削除、テキストを子ノードに持つ要素の追加と削除

insertBefore

obj.insertBefore(newChild, refChild)

refChildで示される既存の子ノードの前に新しい子ノードnewChildを挿入します。

使用例 → 対象となるノードの前に新しいノードを挿入

replaceChild

obj.replaceChild(newChild, oldChild)

oldChildで示される子ノードを新しい子ノードnewChildに置き換えます。

使用例 → ノードの置き換え

cloneNode

obj.cloneNode(deep)

対象となるノードの複製を作成します。このメソッドによって作成された複製は appendChild や insertBefore などによって指定された位置に挿入されます。deepにはコピーする対象の範囲を指定します。「true」を指定した場合には子孫に当たるサブツリーまでコピーし、「false」を指定した場合には該当ノードのみをコピーします。

使用例 → ノードの複製

DOMのプロパティとメソッドの使用例

テキストノードの参照・設定

次の例はある要素の子ノードであるテキストノードを参照・変更しています。

     *** BODY 要素内 ***

<P id="sampTxt3">スペインの首都はマドリードです。</P>

     *** JavaScript 部分 ***

obj = document.getElementById("sampTxt3");
cnt = obj.childNodes[0].nodeValue; // 子ノードの値を参照
obj.childNodes[0].nodeValue = "ポルトガルの首都はリスボンです。";
        // 子ノードの値を設定

上記の例を参考にしたサンプルを作ってみました。参照ボタン、変更ボタンを交互に押して確認してみてください。

◆サンプル

スペインの首都はマドリードです。

◆ソース内容
<SCRIPT type="text/JavaScript">
<!--
var text1="スペインの首都はマドリードです。";
var text2="ポルトガルの首都はリスボンです。";
function showCapital2(){
    if(document.getElementById && document.childNodes){
        var obj=document.getElementById("sampTxt3");
        alert(obj.childNodes[0].nodeValue);
    }
}
function setCountry2(txt){
    if(document.getElementById && document.childNodes){
        var obj=document.getElementById("sampTxt3");
        obj.childNodes[0].nodeValue=txt;
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="sampTxt3">スペインの首都はマドリードです。</P>
<P>
<INPUT type="button" value="参照" onclick="showCapital2()">
<INPUT type="button" value="ポルトガル" onclick="setCountry2(text2)">
<INPUT type="button" value="スペイン" onclick="setCountry2(text1)">
</P>

テキストノードの追加と削除

次の例はテキストノードを追加、削除しています。

     *** BODY 要素内 ***

<P id="sampTxt4">宝くじ当たったぞ！</P>

     *** JavaScript 部分 ***

obj = document.getElementById("sampTxt4");
newText = document.createTextNode("ワーイ！"); // テキストノード作成
obj.appendChild(newText); // 新しいテキストを末尾に追加
obj.removeChild(obj.lastChild); // 末尾のテキストを削除

上記の例を参考にしたサンプルを作ってみました。追加ボタン、削除ボタンを繰り返し押して確認してみてください。

◆サンプル

宝くじ当たったぞ！

◆ソース内容
<SCRIPT type="text/JavaScript">
<!--
function kanki(){
    if(document.getElementById && document.body.appendChild){
        var obj=document.getElementById("sampTxt4");
        var newTxt=document.createTextNode("ワーイ！");
        obj.appendChild(newTxt);
    }
}
function deleteLC(id){
    if(document.getElementById){
        var obj=document.getElementById(id);
        if(obj.lastChild)
            obj.removeChild(obj.lastChild);
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="sampTxt4">宝くじ当たったぞ！</P>
<P>
<INPUT type="button" value="追加" onclick="kanki()">
<INPUT type="button" value="削除" onclick="deleteLC('sampTxt4')">
</P>

要素の追加（属性付）と削除

次の例はIMG要素を追加、削除しています。

     *** BODY 要素内 ***

<P id="sampTxt5">画像を追加</P>

     *** JavaScript 部分 ***

obj = document.getElementById("sampTxt5");
img_el = document.createElement("IMG"); // IMG要素作成
img_el.setAttribute("src", "xx.png"); // src属性を設定
obj.appendChild(img_el); // IMG要素を末尾に追加

上記の例を参考にしたサンプルを作ってみました。追加ボタン、削除ボタンを繰り返し押して確認してみてください。ノードを削除する関数は上記のサンプルと共用しています。

◆サンプル

画像を表示→

◆ソース内容
<SCRIPT type="text/JavaScript">
<!--
function addIMG(val){
    if(document.getElementById && document.body.appendChild){
        var obj=document.getElementById("sampTxt5");
        new_el=document.createElement("IMG");
        new_el.setAttribute("src", val);
        obj.appendChild(new_el);
    }
}
function deleteLC(id){
    if(document.getElementById){
        var obj=document.getElementById(id);
        if(obj.lastChild)
            obj.removeChild(obj.lastChild);
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="sampTxt5">画像を表示→</P>
<P>
<INPUT type="button" value="追加"
   onclick="addIMG('../img/butterfly1.png')">
<INPUT type="button" value="削除" onclick="deleteLC('sampTxt5')">
</P>

テキストを子ノードに持つ要素の追加と削除

次の例はSTROMG要素を追加、削除しています。

     *** BODY 要素内 ***

<P id="sampTxt6">パスポート持参のこと！</P>

     *** JavaScript 部分 ***

obj = document.getElementById("sampTxt6");
strong_el = document.createElement("STRONG"); // STRONG要素作成
newText = document.createTextNode("忘れるな！"); // テキストノード作成
strong_el.appendChild(newText);
     // 作成したテキストノードをSTRONG要素の子ノードにする
obj.appendChild(strong_el); // STRONG要素を末尾に追加
obj.removeChild(obj.lastChild); // 末尾のノードを削除

上記の例を参考にしたサンプルを作ってみました。追加ボタン、削除ボタンを繰り返し押して確認してみてください。ノードを削除する関数は上記のサンプルと共用しています。

◆サンプル

パスポート持参のこと！

◆ソース内容
<SCRIPT type="text/JavaScript">
<!--
function addMes(){
    if(document.getElementById && document.body.appendChild){
        var obj=document.getElementById("sampTxt6");
        var new_el=document.createElement("STRONG");
        var newText=document.createTextNode("忘れるな！");
        new_el.appendChild(newText);
        obj.appendChild(new_el);
    }
}
function deleteLC(id){
    if(document.getElementById){
        var obj=document.getElementById(id);
        if(obj.lastChild)
            obj.removeChild(obj.lastChild);
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="sampTxt6">パスポート持参のこと！</P>
<P>
<INPUT type="button" value="追加" onclick="addMes()">
<INPUT type="button" value="削除" onclick="deleteLC('sampTxt6')">
</P>

対象となるノードの前に新しいノードを挿入

次の例は新しい子ノードを最初の子ノードの前に挿入しています。

     *** BODY 要素内 ***

<P id="sampTxt7">←ここに表示</P>

     *** JavaScript 部分 ***

obj = document.getElementById("sampTxt7");
newText = document.createTextNode("(^_-)V"); // テキストノード作成
obj.insertBefore(newText, obj.firstChild);
     // 作成したテキストノードを最初の子ノードの前に挿入

上記の例を参考にしたサンプルを作ってみました。ボタンを押して確認してみてください。

◆サンプル

←ここに表示

◆ソース内容
<SCRIPT type="text/JavaScript">
<!--
function insertFace(){
    if(document.getElementById && document.body.insertBefore){
        var obj=document.getElementById("sampTxt7");
        var newText=document.createTextNode("(^_-)V");
        obj.insertBefore(newText, obj.firstChild);
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="sampTxt7">←ここに表示</P>
<P>
<INPUT type="button" value="挿入" onclick="insertFace()">
</P>

ノードの置き換え

次の例は最初の子ノードを別のものに置き換えています。

     *** BODY 要素内 ***

<P id="sampTxt8"><EM>オーストラリア</EM>に行きたい。</P>

     *** JavaScript 部分 ***

obj = document.getElementById("sampTxt8");
strong_el = document.createElement("STRONG"); // STRONG要素作成
newText = document.createTextNode("スペイン"); // テキストノード作成
strong_el.appendChild(newText);
     // 作成したテキストノードをSTRONG要素の子ノードにする
obj.replaceChild(strong_el, obj.firstChild); // EM要素をSTRONG要素に置き換え

上記の例を参考にしたサンプルを作ってみました。ボタンを押して確認してみてください。

◆サンプル

オーストラリアに行きたい。

◆ソース内容
<SCRIPT type="text/JavaScript">
<!--
function replaceMes(){
    if(document.getElementById && document.body.replaceChild){
        var obj=document.getElementById("sampTxt8");
        var new_el=document.createElement("STRONG");
        var newText=document.createTextNode("スペイン");
        new_el.appendChild(newText);
        obj.replaceChild(new_el, obj.firstChild);
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="sampTxt8"><EM>オーストラリア</EM>に行きたい。</P>
<P>
<INPUT type="button" value="置き換え" onclick="replaceMes()">
</P>

ノードの複製

次の例はノードの複製を作っています。

     *** BODY 要素内 ***

<P><SPAN id="sampIMG">
<IMG src="xx.png" alt="yy" width="○" height=quot;△">画像
</SPAN></P>
<P id="imgSpace"></P>

     *** JavaScript 部分 ***

obj1=document.getElementById("sampIMG");
copy=obj1.cloneNode(true); // sampIMGを丸ごと複製
obj2=document.getElementById("imgSpace");
obj2.appendChild(copy); // 複製をimgSpaceに表示

上記の例を参考にしたサンプルを作ってみました。下記のサンプルのように複製ノードに変更を加える事も可能です。ボタンを押して確認してみてください。

◆サンプル

蝶蝶の画像

◆ソース内容
<SCRIPT type="text/JavaScript">
<!--
var url="../img/"; // 画像のディレクトリ
function copyIMG(s){ // 引数は変更される画像名
    var objIMG=document.getElementById("sampIMG");
    var copy=objIMG.cloneNode(true);
    var objSP=document.getElementById("imgSpace");
    if(s) // 変更があれば実行
        copy.firstChild.setAttribute("src", url+s+".png");
    objSP.appendChild(copy);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P><SPAN id="sampIMG">
<IMG src="../img/butterfly1.png" alt="蝶" width="40" height="42">
蝶の画像
</SPAN></P>

<P>
<INPUT type="button" value="複製" onclick="copyIMG('')">
<INPUT type="button" value="複製（変更付加）" onclick="copyIMG('butterfly2')">
</P>

<P id="imgSpace"></P>

HTML へのアクセスとノードの扱い方 ← | 動く文字（JavaScript編） | → HTML やテキストを書換える 〜 用途別

最終更新日：01/18/2004
Copyright (C) 2004 Hikky, All Rights Reserved.
URL：http://www12.plala.or.jp/hi-ro/