JavaScript 循环中的 HTML答案

【问题标题】：HTML inside of a JavaScript loopJavaScript 循环中的 HTML
【发布时间】：2016-04-28 16:55:33
【问题描述】：

我正在尝试创建 10 个单选按钮，标记为 1-10，并在我的 html 中使用 for 循环，但我无法让它工作。

<html>
    <body>
      <h2 style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2>
        <form id="NPSform"; style= "text-align:center">
            <script>
                for (var i = 1; i <=10; i++) {
                    <input type="radio" name="scores" id="i" value="i"> i
                }
            </script>
            <input type="submit" name="mysubmit" value="Submit"/>
        </form>
    </body>
</html>

谢谢。我是 JS 新手，所以我还在学习很多东西。

【问题讨论】：

JS 不像 PHP。您不能直接写入标记，您必须使用 document 对象或使用 jQuery 之类的库来遍历 DOM。

标签： javascript html

【解决方案1】：

使用document.write 像这样输出HTML。

document.write('<input type="radio" name="scores" id="i" value="i"> i');

<html>
    <body>
      <h2 style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2>
        <form id="NPSform"; style= "text-align:center">
            <script>
                for (var i = 1; i <=10; i++) {
                    document.write('<input type="radio" name="scores" id="i" value="i">'+ i);
                }
            </script>
            <input type="submit" name="mysubmit" value="Submit"/>
        </form>
    </body>
</html>

【讨论】：

document.write 行的结尾应该是value="i"> ' + i);
谢谢，我知道我错过了什么！

【解决方案2】：

您可以将所有输入添加到循环内的一个字符串，然后将其附加到 HTML，您还应该将 js 和 html 代码分开

var inputs = '';
 for (var i = 1; i <= 10; i++) {
   inputs += '<input name="scores" type="radio" value="' + i + '" id="' + i + '">'+i+'';
 }
 document.getElementById('NPSform').insertAdjacentHTML('afterbegin', inputs);

<h2 style="text-align:center">On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?</h2>
<form id="NPSform" style="text-align:center">
  <input type="submit" name="mysubmit" value="Submit" />
</form>

也可以创建一个div，设置innerHTML，使用insertBefore添加到html中

var inputs = '';
for (var i = 1; i <= 10; i++) {
  inputs += '<input name="scores" type="radio" value="' + i + '" id="' + i + '">' + i + '';
}

var div = document.createElement('div');
div.innerHTML = inputs;

var submit = document.querySelector('#NPSform input');
submit.parentNode.insertBefore(div, submit);

<h2 style="text-align:center">On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?</h2>
<form id="NPSform" style="text-align:center">
  <input type="submit" name="mysubmit" value="Submit" />
</form>

【讨论】：

你应该指定脚本标签应该放在正文的末尾还是至少在表单之外的某个地方？

【解决方案3】：

<html>
<head>
<script>
  function addbuttons() {
    var buttons = document.getElementById("dynamicButtons");
            for (var i = 1; i <=10; i++) {
                buttons.innerHTML += '<input type="radio" name="scores" id="' +i +' " value="' +i +'">'
            }

            }
 </script>
</head>
<body onload="addbuttons()">
  <h2 style="text-align:center">
    On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
  </h2>
    <form id="NPSform"; style= "text-align:center">     
        <div id="dynamicButtons"></div>
        <input type="submit" name="mysubmit" value="Submit"/>
    </form>
</body>
</html>

【讨论】：

【解决方案4】：

<html>
    <body>
      <h2 style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2>
        <form id="NPSform"; style= "text-align:center">
            <input type="submit" name="mysubmit" value="Submit"/>
        </form>
    </body>
    <script>
        for (var i = 1; i <=10; i++) {
            document.write("<input type='radio' name='scores' id='"+i+"' value='"+i+"'> "+i+"");
        }
    </script>
</html>

【讨论】：

我建议你阅读Minimal, Complete and verifiable example来改进你的例子。

【解决方案5】：

<html>
    <body>
      <h2 style="text-align:center">
        On a scale from 1-10, how likely are you to recommend this site to a friend or colleague?
      </h2>
      <form id="NPSform"; style= "text-align:center">

        <div id="radioscontainer">
        </div>

        <input type="submit" name="mysubmit" value="Submit"/>
      </form>


<script>
  var radioButtons = '';
  for (var i = 1; i <=10; i++) {
    radioButtons += '<input type="radio" name="scores" id="i" value="i"> i';
  }//for
  $("#radioscontainer").append( radioButtons );
</script>
</body>
</html>

【讨论】：

他可能需要一个纯js的方法而不是jQuery