修改子div的innerHTML

我是JavaScript新手。我想要做的是創建一個div，並在裏面會有另一個div。在我的腳本代碼中，我嘗試使用工廠函數創建該div的新實例，如果這是正確的名稱，並且如果可能的話更改子div的innerHTML。提前致謝。修改子div的innerHTML

<div class = "loopBlock" style="width:350px;"> 
    <fieldset> 
     <legend style="color:black;font-weight:bold;">While Loop</legend> 
     <table> 
      <tr> 
      <td>Condition:</td> 
      <td><input type="text" /></td> 
      </tr> 
     </table> 

     <div class = "codeDivClass" id = "codeDiv"> 
      HelloWorld! 
     </div> 
    </fieldset> 
</div> 


<script> 
    var loopDiv = document.getElementsByClassName("loopBlock"); 
    var loopi =1; 

    function loopObject(){ 
     var loopDivObject = document.createElement("div"); 
     loopDivObject.innerHTML = loopDiv[0].innerHTML; 
     loopDivObject.className = "loopBlock"; 
     loopDivObject.id = "loopBlock"+loopi; 
     loopi++;  
     return loopDivObject; 
    }; 

    var functionCodeDiv = document.getElementById("codeDiv"); 

    for (i=0; i<5; i++){ 
     var tempLoop = loopObject(); 
     functionCodeDiv.appendChild(tempLoop); 
     var id = "loopBlock"+i+1; 
     document.getElementById(id).getElementsByTagName('div')[0].innerHTML = "bye"; 
    } 

</script>

來源

2015-04-18 cpu_meltdown

沒有真正知道它應該如何工作，但我確定我發現了一個錯誤。

var id = "loopBlock"+i+1;

你有更換：

var id = "loopBlock"+(i+1);

例子我是2

在第一種情況下你：「loopBlock21」

在第二（我） case，你會得到「loopBlock3」

來源

2015-04-18 21:16:16 alexeiTruhin

問題出在operator precedence。由於在此行

var id = "loopBlock" + i + 1;

你有兩個+ (unary plus)運營商相同的優先級，他們將作爲一個字符串連接運營商，因爲一個操作數是一個字符串（「loopBlock」）。

在你的情況下，你想用括號將i + 1分組，以使表達式首先作爲算術加法運算符進行求值。經過與"loopBlock"該字符串連接會產生預期的結果：

var id = "loopBlock" + (i + 1);

演示：http://jsfiddle.net/0091n9tt/

來源

2015-04-18 21:20:15 dfsq

你是完全正確的，我忘記了這一點。對我來說這是一個全新的世界。非常感謝.... –

我想你是問題是這一行：

document.getElementById(id).getElementsByTagName('div')[0].innerHTML = "bye";

你實際上是在做什麼正試圖在新創建的div（loopBlock）內獲取div，該div是空的。

您已經有了要修改innerHTML的塊的引用;你可以簡單地使用它像這樣：

tempLoop.innerHTML = "bye";

所以你for循環應該是這樣的：

for (i=0; i<5; i++){ 
    var tempLoop = loopObject(); 
    functionCodeDiv.appendChild(tempLoop); 
    tempLoop.innerHTML = "bye"; 
}

請注意，您不需要ID了。

來源

2015-04-18 21:26:16 plafer

修改子div的innerHTML

回答

相關問題