是否可以自动生成HTML代码？

Question

我是使用HTML的新手，也许这个问题很愚蠢，但是可以在html中创建循环吗？

到目前为止，我所做的是一项询问用户号码的调查。现在有了这个数字，想法是用一些输入创建一个确定的文本区域。

这就是我所拥有的：

<p>-----DEFINITIONS----- 

    <h1 id="demo"></h1>
    <script>
        var cant_def=prompt("How many definitions do you have?")
        var cant_par= prompt("How many pairs do you have?")

    </script>
    <p><b>Definition 1:</b></p>
    <p>Introduce the word:</p>
    <input type="text" name="campo1" style="width: 300px;"/>
    <p>Introduce the meaning:</p>
    <input type="text" name="camp1_res" style="width: 500px;" />

   <!--<textarea id="def1" rows="1" cols="20" name="def1"></textarea></p>  --> 
</p>

仅当保存在“ cant_def”中的给定数字为1且“ cant_par”为2时，才能使用名为“定义1”的区域。但是，如果要具有3个定义和4对，则“定义1”组将起作用出现3次，“ campo1”和“ camp1_res”重复4次。

让我通过图形示例向您展示我的意思。

该网页要求您输入数字，然后输入“ 2”，然后输入“ 2”。所以这就是生成的代码：

<p><b>Definition 1:</b></p>
    <p>Introduce the word:</p>
    <input type="text" name="campo1" style="width: 300px;"/>
    <p>Introduce the meaning:</p>
    <input type="text" name="camp1_res" style="width: 500px;" />
    <p>Introduce the word:</p>
    <input type="text" name="campo1" style="width: 300px;"/>
    <p>Introduce the meaning:</p>
    <input type="text" name="camp1_res" style="width: 500px;" />



    <p><b>Definition 2:</b></p>
    <p>Introduce the word:</p>
    <input type="text" name="campo1" style="width: 300px;"/>
    <p>Introduce the meaning:</p>
    <input type="text" name="camp1_res" style="width: 500px;" />
    <p>Introduce the word:</p>
    <input type="text" name="campo1" style="width: 300px;"/>
    <p>Introduce the meaning:</p>
    <input type="text" name="camp1_res" style="width: 500px;" />

这将是结果：

另一个重要的事情，变量“ cant_par”必须为偶数！ 谢谢指教〜

Answer 1

HTML只是一种标记语言，不能实际执行代码。但是，您可以使用JavaScript通过for和/或while设置进​​行循环。

var number_of_definitions = 5;
for(i=0;i!=number_of_definitions;i++) {
    document.write("your html here");
}

此外，您的定义应放在<div>元素中，以便于处理。当您使用CSS或尝试格式化任何内容时，它们会很有帮助。