目次

オブジェクトなJavaScriptの基礎講座

DOM in DOM

◆ はじめに

静的なHTML文書あり、そこに動的に要素を追加するには、最近は、DOMを使ってJavaScriptで実現します。

では、DOMで動的に実現しさせた要素に対して新たに要素を追加するには、どうしたら良いでしょうか...。

実は、これもDOMで実現させます。まぁ、頭の中でHTMLの各要素を展開させて文書構造にあったロジックを組むわけです。

◆ サンプル

以下のサンプルは、『要素追加』をクリックするたびに、form要素内のdiv要素の内容をDOMを使ってol要素、li要素、textarea要素を階層的に追加しています。

<script type="text/javascript">
var cnt = 0;
function add_com(){
      if(document.getElementById && document.createElement){
         nm_li = "li" + cnt;
         if(cnt == 0){ //div要素内容のol要素を初回一つのみ追加処理
            node_ol = document.createElement('ol');
            node_ol.setAttribute('id', "ol01");
            document.getElementById('test1').appendChild(node_ol);
         }
         node_li = document.createElement('li');
         node_li.setAttribute('id', nm_li);
         document.getElementById('ol01').appendChild(node_li);//ol要素内容のli要素を追加
         node = document.createElement('textarea');
         document.getElementById(nm_li).appendChild(node);//li要素内容のtextarea要素を追加
         cnt++;
      }
      else{
          alert('あなたのブラウザは Level 1 DOM を未サポートです');
      }
}
</script>
<form> 
<div id="test1"> </div>  
</form> 
<p>
<a href="#" onclick="add_com();return false;">『要素追加』</a> 
</p>

サンプル『要素追加』です。

 

目次