修改子项的 innerHTML div

Question

我是 JavaScript 的新手。我想要做的是制作一个 div 并且在它里面会有另一个 div。在我的脚本代码中，我尝试使用工厂函数创建 div 的新实例（如果这是它的正确名称），然后如果可能的话更改子 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>

Answer 1

没有真正理解它应该如何工作，但我确定我发现了一个错误。

    var id = "loopBlock"+i+1;

你必须替换为：

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

示例 i 为 2。

第一种情况你得到："loopBlock21"

在第二个（我的）案例中，你会得到"loopBlock3"

Answer 2

问题出在operator precedence。因为在这一行

var id = "loopBlock" + i + 1;

您有两个优先级相同的 + (unary plus) 运算符，它们将充当字符串连接运算符，因为其中一个操作数是字符串 ("loopBlock")。

在您的情况下，您希望将 i + 1 与括号分组，以使表达式首先作为算术加法运算符求值。在与 "loopBlock" 的字符串连接之后将产生预期的结果：

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

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

Answer 3

我认为你的问题在于这一行：

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

您实际上在做的是尝试将 divs 放入新创建的 div（loopBlock）中，它是空的。

您已经有了对要修改innerHTML 的块的引用；你可以像这样简单地使用它：

tempLoop.innerHTML = "bye";

所以你的 for 循环看起来像这样：

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

请注意，您不再需要该 ID。

修改子项的 innerHTML div

Modify innerHTML of a child div

html

javascript

jquery

innerhtml