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。

在第一种情况下，您会得到：＆＃34; loopBlock21＆＃34;

在第二个（我的）案例中，您将获得＆＃34; loopBlock3＆＃34;

Answer 2

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

var id = "loopBlock" + i + 1;

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

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

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

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

Answer 3

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

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

你实际上在做的是尝试在新创建的div（loopBlock）中获取div，这是空的。

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

tempLoop.innerHTML = "bye";

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

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

请注意，您不再需要id。

修改子div的innerHTML

3 个答案: