JS中document.createElement()の使い方

コードを分析するとき、自分の盲点であるdocumentを発見する.createElement()は、サーフィンをして、経験をまとめました.

  document.createElement()     **      **，  appendChild()   insertBefore()      。  ，appendChild()                    。insertBefore()                      。



    ，    document.createElement()   。

例1：

        type</span>=<span class="hljs-string">"text/javascript"</span>>
            <span class="hljs-keyword">var</span> board = document.getElementById(<span class="hljs-string">"board"</span>);
            <span class="hljs-keyword">var</span> e = document.createElement(<span class="hljs-string">"input"</span>);
            e.<span class="hljs-keyword">type</span> = <span class="hljs-string">"button"</span>;
            e.value = <span class="hljs-string">"          "</span>;
            <span class="hljs-keyword">var</span> <span class="hljs-class"><span class="hljs-keyword">object</span> = <span class="hljs-title">board</span>.<span class="hljs-title">appendChild</span><span class="hljs-params">(e)</span>;</span>
        

効果:ラベルboardにボタンをロードします.プロパティ値は「ロードをテストする小さな例です」です.
例2:

        <script type="text/javascript">
            var board = document.getElementById("board");
            var e2 = document.createElement("select");
            e2.options[0] = new Option("   1", "");
            e2.options[1] = new Option("   2", "");
            e2.size = "2";
            var object = board.appendChild(e2);
        script>

効果:ラベルboardにドロップダウン・リスト・ボックスをロードします.属性値は「ロード・アイテム1」と「ロード・アイテム2」です.
例3:

        <script type="text/javascript">
            var board = document.getElementById("board");           
            var e3 = document.createElement("input");
            e4.setAttribute("type", "text");
            e4.setAttribute("name", "q");
            e4.setAttribute("value", "  setAttribute");
            e4.setAttribute("onclick", "javascript:alert('This is a test!');");           
            var object = board.appendChild(e3);
        script>

効果:ラベルboardにテキストボックスをロードします.属性値はsetAttributeを使用します.このテキストボックスをクリックすると、ダイアログボックス「This is a test!」が表示されます.

          ，    ，              ，      。  e.type="text"   e.setAttribute("type","text")      。



      ，          appendChild()    insertBefore()      。

              div        P ：
Node
Node

次のように書くことができます.

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  //       
  //appendChild  ：
  oTest.appendChild(newNode);
  //insertBefore  ：
  oTest.insertBefore(newNode,null);
script>

         ，                  div ，     div      。   ，      ，    appendChildhild insertBefore            。

上の例では、oTestというコードがあります.InsertBefore(newNode,null)、ここでinsertBeforeには2つのパラメータが設定できます.1つ目はappendChildと同じで、2つ目はそれ特有です.nullだけでなく、次のようにすることもできます.

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild);
script>

効果:この例ではx 1ノードの前に新しいノードが挿入されます.
または、

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild.nextSibling);
script>

効果:この例では、x 1ノードの次のノードの前に新しいノードが挿入されます.
次のこともできます.

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,oTest.childNodes[0]); 
script>

この例では、第1のサブノードの前に新しいノードを挿入するか、childNodes[0,1,...]を変更することによって、他の位置に新しいノードを挿入することもできる.
insertBefore()メソッドの特性は既存のサブノードの前に新しいノードを挿入することであるが、例1ではinsertBefore()メソッドを用いてサブノードリストの最後に新しいノードを挿入することもできる.2つのケースを組み合わせると,insertBefore()メソッドがノードを挿入し,サブノードリストの任意の位置にあることが分かった.
これらの例から、
appendChild()メソッドは、ノードのサブノードリストの最後に新しいサブノードを追加します.
InsertBefore()メソッドは、ノードのサブノードリストの任意の位置に新しいノードを挿入します.
原文住所:http://www.cnblogs.com/penny/archive/2008/09/01/1281293.html