将内容定位到 div 的问题（内容显示在新页面上）答案

【问题标题】：Problem targeting content to div (content is shown on new page)将内容定位到 div 的问题（内容显示在新页面上）
【发布时间】：2011-03-03 16:18:22
【问题描述】：

我有一个网页，其中有一个我想重新填充的 div。目前，该 div 的内容是使用 Javascript 通过以下方式生成的：

function foo(array){
    for(i=1;i<=maxIndex;i+=1){
        document.write ("<label><input type='checkbox'/>" + array[i] + "\n </label><br />")
    }
}

我通过以下方式填充 div：

        <div class="bla">
        blablabla
        </div>

        <div class="myDiv" id="myDiv">
            <form name="myForm">
            <script type="text/javascript">
                foo(myArray);
            </script>
            </form>
        </div>

        <div class="blah">
             blahblahblah
             <form>
             <select onchange="updateDiv(myArray)">
                          <option value="1"> Test1 </option>
                          <option value="2"> Test2 </option>
                          <option value="3"> Test3 </option> 
             </select>
             </form>
        </div>

我想重新填充 div 的原因是因为我想用户可以选择div内容的排列方式（即当用户从组合框中选择某个项目时，“myArray” 重新排序，然后重新填充 myDiv，使内容现在以不同的顺序显示）。

function updateDiv(array){
     array.sort();
     document.getElementById('myDiv').innerHTML = '<form name="myForm"><script type="text/javascript"> foo(myArray); </script></form>';

}

我遇到的问题是我无法针对新的用户选择组合框时 myDiv 中的内容。

我尝试过使用 innerhtml，但是正确输出的新内容显示在一个全新的页面中，而不是显示在 myDiv 中，因为 JavaScript。

编辑：似乎现在的问题是 innerhtml 更新了正确 div 中的代码（至少当我用 firebug 检查它时）但没有显示文本（JavaScript 尚未运行......？）。

我在网上看了一圈，似乎没有找到合适的解决方案。

如果有人能指出我正确的方向或让我知道我是否完全错误地接近这个。

谢谢

【问题讨论】：

标签： javascript html innerhtml

【解决方案1】：

您的 foo() 看起来不正确...这对我有用：-

<script>
function foo(array){
    for(i=0;i<array.length;i++){
        document.write ("<label><input type='checkbox'/>" + array[i] + "\n </label><br />")
    }
}
</script>

HTML 代码：

<div class="bla">
blablabla
</div>

<div class="myDiv" id="myDiv">
    <form name="myForm">
    <script type="text/javascript">
        // test code
        var myArray = ["a", "b"];
        foo(myArray);
    </script>
    </form>
</div>

<div class="blah">
blahblahblah
</div>

看起来是这样的：-

【讨论】：

【解决方案2】：

存在几个语法问题，但以下有效：

<html>
<head>
<script type="text/javascript">
function foo(arr){
    for(i=0; i<arr.length; i++){
        document.write ("<label><input type='checkbox'/>" + arr[i] + "\n </label><br />")
    }
}
</script>
</head>
<body>
        <div class="bla">
        blablabla
        </div>

        <div class="myDiv" id="myDiv">
            <form name="myForm">
            <script type="text/javascript">
              myArray = ["A","B","C"];
                foo(myArray);
            </script>
            </form>
        </div>

        <div class="blah">
        blahblahblah
        </div>
</body>
</html>

【讨论】：

您好，感谢您的回复。是的，上面的代码是我对页面的第一个实例所做的。但是之后，当用户选择一个组合框选项 1) 使用数组 2) 应该再次运行 foo() 以便 myDiv 更新为假设 B C A 而不是 A B C，新页面仅显示 B C A 和 blablabla 消失了。我会更新我的问题以使其更清楚。

【解决方案3】：

好的，我终于弄清楚问题出在哪里了：我不应该使用这么多 document.write()，它会在新页面上输出。

相反，我将所有内容存储在一个字符串中，然后仅在最后一步使用 document.write()，方法如下：

var astring;

function foo(array){
    for(i=1;i<array.length;i+=1){
        astring += "<label><input type='checkbox'/>" + array[i] + "\n </label><br />";
    }

function updateDiv(array){
     array.sort();
     document.getElementById('myDiv').innerHTML = astring;
    }

【讨论】：