如何附加一些带有循环的单选按钮并将其包裹在表单元素周围?

Question

我有一个数组，我想将此数组的每个元素作为单选按钮附加到特定 DOM 中。我的方法是遍历数组。

但是，我想创建一个 htmlform元素，该元素使用 jQuery 创建的单选按钮环绕这个新元素。

1. form开始标记。
2. 循环数组并附加所有单选按钮。
3. form结束标记。

表单元素是开放式的，并立即关闭，然后跟随循环创建的单选按钮。

我认为这是因为JavaScript的异步性质。

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>

预期成果：

<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>

Answer 1

这里有一种方法(在vanilla javascript中(，使用：

• for...of循环
• document.createElement()
• .setAttribute()
• .textContent
• .appendChild

工作示例：

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', 'ingredients');
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>

Answer 2

你可以用它来大大简化事情：

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>`);
}

Answer 3

Rounin 的解决方案有效，但由于某种原因，标签不可单击，只能单击实际按钮。 我玩弄它。我在这里没有包含表单元素：

function addRadioButtonsForm(array, myId) {
const rbParent = document.getElementById('myId');
for (let i = 0; i<array.length; i++) {
// BUILD THE RADIO BUTTON
let radio = document.createElement('input');
radio.type = 'radio';
radio.name = "options";
radio.value = "option"+i ; 
RBParent.appendChild(radio);
// BUILD THE LABEL
let label = document.createElement('label');
label.textContent = options[i]+"n";
RBParent.appendChild(label);
// BUILD THE LINEBREAK
let linebreak = document.createElement('br');
RBParent.appendChild(linebreak);
};
}