2015-03-13 253 views
0

我需要創建,裝飾並將子div'添加到現有的元素。例如,在執行appendChildren後,下面的div將'div'元素作爲參數傳遞給JavaScript函數

<div id="a"> 
     <div id="b"> 
     </div> 
    </div> 

應採取以下形式(假設decorateDiv添加文本「這是新的div」裏新的div)

<div id="a"> 
     <div id="b"> 
     <div>"This is new div"</div> 
     </div> 
     <div>"This is new div"</div> 
    </div> 

這裏是我的代碼

function appendChildren() { 
    var allDivs = document.getElementsByTagName("div"); 
    for (var i = 0; i < allDivs.length; i++) { 
    var newDiv = document.createElement("div"); 
    decorateDiv(newDiv); 
    allDivs[i].appendChild(newDiv); 
    } 
    } 


    function decorateDiv(div) { 
     var x = document.getElementByTagName("div"); 
     var t = document.createTextNode("This is new div"); 
    x.appendChild(t); 
    } 

我對JavaSpript完全陌生。我究竟做錯了什麼?請幫我修復錯誤

回答

0

你不使用參數divdecorateDiv應該是這樣的:

function decorateDiv(div) { 
    //div is the object element 
    var t = document.createTextNode("This is new div"); 
    div.appendChild(t); 
} 
+0

謝謝你的解釋。但http://jsbin.com/sebazafoqu/1/edit?html,js,console,output - 它仍然不起作用 – julie 2015-03-13 07:20:25

+0

它工作但它創造了一個無限的循環,你可以看到。 – Xlander 2015-03-13 07:26:44

+0

對不起,但我如何解決無限循環問題呢? – julie 2015-03-13 07:32:12

0

您傳遞給函數'decorateDiv'的參數'div'沒有被使用過。 您可以更改像下面的decorateDiv功能:

function decorateDiv(div) { 
var t = document.createTextNode("This is new div"); 
div.appendChild(t); 
} 

希望這有助於!

0

「allDivs」變量獲得更新時使用appendChild任何DIV因爲「格」標記名的元素的數組存儲。 所以,使用類來獲取div。

<div id="a" class="test"> 
A 
<div id="b" class="test"> 
    B 
</div> 
</div> 

下面是用戶腳本:

function appendChildren() { 
     var allDivs = document.getElementsByClassName("test"); 
      for (var i = 0 ; i < allDivs.length ; i++) { 
       var newDiv = document.createElement("div"); 
       decorateDiv(newDiv); 
       allDivs[i].appendChild(newDiv); 
      } 
     } 
     function decorateDiv(div) { 
      var t = document.createTextNode("This is new div"); 
      div.appendChild(t); 
     } 
     appendChildren(); 

,你也沒有使用傳遞給裝飾功能參數。

這將工作。試試這個..

相關問題