修改子div的innerHTML答案

【问题标题】：Modify innerHTML of a child div修改子div的innerHTML
【发布时间】：2015-04-18 20:56:29
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript jquery html innerhtml

【解决方案1】：

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

    var id = "loopBlock"+i+1;

你必须替换为：

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

示例 i 是 2。

第一种情况你会得到：“loopBlock21”

在第二种（我的）案例中，你会得到“loopBlock3”

【讨论】：

【解决方案2】：

问题出在operator precedence。由于在这一行

var id = "loopBlock" + i + 1;

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

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

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

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

【讨论】：

你说得对，我忘了。对我来说这是一个全新的世界。非常感谢……

【解决方案3】：

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

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。

【讨论】：