JavaScript循环中的HTML [英] HTML inside of a JavaScript loop
本文介绍了JavaScript循环中的HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建10个单选按钮，它们的html内标记为1-10，并带有for循环，但无法正常工作.
I'm trying to create 10 radio buttons, labeled 1-10 with a for loop inside of my html and I can't get it to work.
<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的新手，所以我仍然学到很多东西.
Thanks. I'm new to JS so I'm still learning a lot.
推荐答案
您可以将所有输入添加到循环内的一个字符串中，然后将其附加到HTML，还应将 js 和 html 代码
You can add all inputs to one string inside loop and then append it to HTML, also you should separate your js and html code
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
You can also create one div, set innerHTML and use insertBefore to add it to 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>这篇关于JavaScript循环中的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
