我有一个数组，我想把这个数组的每个元素作为一个单选按钮追加到特定DOM中。 我的方法是在数组上循环。
但是，我想创建一个htmlform元素，它用jQuery创建的单选按钮对此进行包装。
表单开始标记。窗体结束标记。表单元素被打开并立即关闭，然后跟随循环创建的单选按钮。
我认为这是因为JavaScript的异步特性。
null
let arr = ['Apple', 'Banana', 'Tomatoe', 'Sugar'];
function loop_append(elem) {
$('a').append(`
<label for=${elem}>${elem}</label
<input type="radio" name="${elem}"></input></br>`
function radioButtonappender() {
$('.a').append('<form name="test">');
for (let i = 0; i < arr.length; i++) {
loop_apend(arr[i]);
}
$('.a').append('</form>');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A">
<div class="a">
</div>
</div>null
预期结果:
<div class="A">
<div class="a">
<form name="test">
/* -> ALL THE RADIO BUTTONS AND LABELS */
</form>
</div>
</div>
实际（错误）结果
<div class="A">
<div class="a">
<form name="test"> </form>
/* -> ALL THE RADIO BUTTONS AND LABELS */
</div>
</div>
下面是一种方法（在普通javascript中），使用:
Document.createElement().setAttribute().textContent.AppendChild工作示例:
null
let arr = ['Apple', 'Banana', 'Tomato', 'Sugar'];
function addRadioButtonsForm(arr) {
const a = document.getElementsByClassName('a')[0];
// BUILD THE FORM
let form = document.createElement('form');
form.setAttribute('name', 'test');
for (element of arr) {
// BUILD THE LABEL
let label = document.createElement('label');
label.setAttribute('for', element);
label.textContent = element;
form.appendChild(label);
// BUILD THE RADIO BUTTON
let radio = document.createElement('input');
radio.setAttribute('type', 'radio');
radio.setAttribute('name', element);
form.appendChild(radio);
// BUILD THE LINEBREAK
let linebreak = document.createElement('br');
form.appendChild(linebreak);
}
a.appendChild(form);
}
addRadioButtonsForm(arr);<div class="A">
<div class="a">
</div>
</div>
你可以用它来大大简化事情:
let arr = ['Apple', 'Banana', 'Tomatoe', 'Sugar'];
$('.a').append('<form name="test"></form>');
for ( var i = 0, l = arr.length; i < l; i++ ) {
$('form').append(`<label for=${arr[i]}>${arr[i]}</label>
<input type="radio" name="${arr[i]}"></input></br>`);
}
