HTML やテキストを書換える～用途別

このページは？

このページは前節で紹介したHTML やテキストの書換えを用途別にいくつか実践してみます。ソース内容はDOMによる方法とinnerHTMLを使用した方法の両方を併記しました。ただし、実行例はDOMによる方法で実行しています。

空要素にテキストを書き込む

<DIV id="exzample1"></DIV>

例えば上記のような空のDIV要素に「こんにちは！」と表示するサンプルを作ってみましょう。

◆実行例

DOMによる方法

※ ここで注意すべきことは上の例のDIV要素は子ノードを持たないので次のような方法は使えません。

obj=document.getElementById("exzample1");
obj.firstChild.nodeValue="こんにちは！"; // エラー

新しいテキストノードを作成してと appendChildで追加しています。尚、テキストノードが複数追加されないように工夫しています。

<SCRIPT type="text/JavaScript">
<!--
function greet1(){
   if(document.getElementById && document.body.appendChild){
      var obj=document.getElementById("exzample1");
      if(!obj.firstChild){ // 子ノードがない場合に実行
         var newText=document.createTextNode("こんにちは！");
         obj.appendChild(newText);
      }
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="exzample1"></P>
<P><input type="button" value="あいさつ表示" onclick="greet1()"></P>

innerHTMLによる方法

innerHTMLに文字列を代入します。

<SCRIPT type="text/JavaScript">
<!--
function greet2(){
   if(document.getElementById){
      var obj=document.getElementById("exzample1");
      obj.innerHTML="こんにちは！";
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="exzample1"></P>
<P><input type="button" value="あいさつ表示" onclick="greet2()"></P>

要素内のある子ノードを変更する

<P id="exzample2">ここは<EM id="kuni">北国、北海道</EM>です。</P>

例えば上の例の <EM id="kuni">北国、北海道</EM> の部分を <STRONG id="kuni">南国、沖縄</STRONG> に変更してみましょう。

◆実行例: ここは北国、北海道です。

DOMによる方法

DOMによる方法では要素内のある特定の子ノードを簡単に別のものに置きかえる事ができます。以下のソース内容は新たにSTRONG要素を作成してreplaceChikdで既存のEM要素と置き換えています。

<SCRIPT type="text/JavaScript">
<!--
function changeWords1(){
   if(document.getElementById && document.body.replaceChild){
      var obj = document.getElementById("exzample2");
      strong_el = document.createElement("STRONG");
      newText = document.createTextNode("南国、沖縄");
      strong_el.appendChild(newText);
      strong_el.setAttribute("id", "kuni");
      obj.replaceChild(strong_el, document.getElementById("kuni"));
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="exzample2">ここは<EM id="kuni">北国、北海道</EM>です。</P>
<P><input type="button" value="変更" onclick="changeWords1()"></P>

innerHTMLによる方法

innerHTMLによる方法では要素の中身をすべて入れ換えることになるでしょう。

<SCRIPT type="text/JavaScript">
<!--
function changeWords2(){
   if(document.getElementById){
      var obj = document.getElementById("exzample2");
      obj.innerHTML = "ここは<STRONG id=\"kuni\">南国、沖縄<\/STRONG>です。";
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="exzample2">ここは<EM id="kuni">北国、北海道</EM>です。</P>
<P><input type="button" value="変更" onclick="changeWords2()"></P>

要素内を新しく書換える

<P id="exzample3">彼は<EM>果物</EM>が好きだ。</P>

上のP要素の中身を新しく書換えてみましょう。

◆実行例: 彼は果物が好きだ。

DOMによる方法

DOMによる方法では中身を書換えようとする要素自身を丸ごと作成して親ノードからreplaceChildを使って自分自身と置き換えます。子ノードをひとつひとつ作成しなければならないのでノード数が多い場合（要素を多く含む場合）はかなり面倒です。

<SCRIPT type="text/JavaScript">
<!--
function changeMes1(){
   if(document.getElementById && document.body.replaceChild){
      var p_el = document.createElement("P");
      var newText1 = document.createTextNode("特に");
      p_el.appendChild(newText1);
      var strong_el = document.createElement("STRONG");
      var newText2 = document.createTextNode("メロン");
      strong_el.appendChild(newText2);
      p_el.appendChild(strong_el);
      var newText3 = document.createTextNode("は大好物だ。");
      p_el.appendChild(newText3);
      p_el.setAttribute("id", "exzample3");
      var obj = document.getElementById("exzample3");
      obj.parentNode.replaceChild(p_el, obj);
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="exzample3">彼は<EM>果物</EM>が好きだ。</P>
<P><INPUT type="button" value="書換える" onclick="changeMes1()"></P>

innerHTMLによる方法

子ノードが多い場合、つまり要素が多く含まれている場合にはinnerHTMLを使うほうが有利です。

<SCRIPT type="text/JavaScript">
<!--
function changeMes2(){
   if(document.getElementById){
      var obj = document.getElementById("exzample3");
      obj.innerHTML = "特に<STRONG>メロン<\/STRONG>は大好物だ。";
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="exzample3">彼は<EM>果物</EM>が好きだ。</P>
<P><INPUT type="button" value="書換える" onclick="changeMes2()"></P>

要素の中身をすべて削除する

<P id="exzample4">この文章は<EM>ボタン</EM>を押すと消えます。</P>

上のP要素の中身をすべて消してみましょう。

◆実行例: この文章はボタンを押すと消えます。

DOMによる方法

ループを使って子ノードの数だけremoveChildを実行します。

<SCRIPT type="text/JavaScript">
<!--
function delate1(){
   if(document.getElementById && document.body.removeChild){
      var obj = document.getElementById("exzample4");
      var len = obj.childNodes.length;
      for(var i=0; i<len; i++){ // 子ノードの数だけ実行
         obj.removeChild(obj.firstChild);
      }
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="exzample4">この文章は<EM>ボタン</EM>を押すと消えます。</P>
<P><input type="button" value="消えます" onclick="delete1()"></P>

innerHTMLによる方法

innerHTMLに空文字を代入します。

<SCRIPT type="text/JavaScript">
<!--
function delate2(){
   if(document.getElementById){
      var obj = document.getElementById("exzample4");
      obj.innerHTML = "";
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="exzample4">この文章は<EM>ボタン</EM>を押すと消えます。</P>
<P><input type="button" value="削除" onclick="delate2()"></P>

HTML やテキストを書換える ～ 用途別

このページは？

目次

HTML やテキストを書換える～用途別