Question

如何使用JavaScript将所有这些代码生成到div元素中。

<div id=parentDiv>
    <div id="question1"> 
        QuestionNo 1
        <button onclick="setOption(1,1)">A</button>
        <button onclick="setOption(1,2)">B</button> 
    </div>
</div>

我想将id question1'n'的次数插入 question2 ， question3 ，以及调用的参数函数 setOption 应该像每个问题的 setOption（i，1），setOption（i，2）。

我试过用这个。

var paper = document.getElementById("paper");
for (i = 1; i <= NOQ; i++) {
    paper.innerHTML += '<div id="question' + i + '">'           

    var element = document.getElementById("question" + i);

    element.innerHTML += 'QuestionNo ' + i + ' :';
    element.innerHTML += '<button onclick="setOption(' + i + ',1)">A</button>';
    element.innerHTML += '<button onclick="setOption(' + i + ',2)">B</button>';
}

但是，当 n 的值超过200左右时，此方法需要花费大量时间，这让我想到了加载屏幕。但问题是所有的n元素一下子被屏蔽在一起而不是一个接一个，我的加载屏幕也是如此。加载屏幕在过程结束时也会被其他元素撞击。

我的问题是，这种方法是否合法？为什么这需要花费这么多时间？ appendchild方法是否比这更好（如果是，有人可以帮助我如何使用append子方法插入所有这些）？如何在每个元素加载时显示加载屏幕显示进度？

Answer 1

我已经解决了一些错误，但你会得到一般的想法。

 var paper = document.getElementById("paper");
    for(i=1; i<=NOQ; i++){
        paper.innerHTML+='<div id="question'+i+'"></div>'             

        var element = document.getElementById("question" + i);

        element.innerHTML='QuestionNo '+i+' :<button onclick="setOption('+i+',1)">A</button><button onclick="setOption('+i+',2)">B</button>';
}

这不需要很长时间才能加载。如果您的加载时间很长，请考虑分页。

Answer 2

检查此代码：

HTML

<div id=parentDiv>
    <div id="question1"> 
        <script>
            fn_generate(10);//give any no. in place of 10 i.e. the no of qstns you want.
        </script>
    </div>
</div>

的JavaScript

fn_generate=function(n)
{
    for (i=1; i<=n; i++)
    {
        document.write("QuestionNo " + i);
        for(j=1; j<=2; j++)
            document.write("<button onclick='setOption("+i+","+j+")'>Ans" + j + "</button>");
        document.write("<br>");
    }
}

如何使用JavaScript在div元素中插入HTML元素？

2 个答案:

HTML

的JavaScript