Как я могу лучше динамически генерировать переключатели и текстовые метки в промежуток?

Question

Как я могу заставить эту функцию писать динамически генерируемые радиокнопки

A) более элегантно ... как в jQuery ...

B) или, по крайней мере, как автоматически генерировать радиокнопки с текстовыми метками Something и SomethingElse (равными количеству, введенному в текстовое поле, которое запускает вызов функции) в промежуток, называемый area3.Спасибо!

function tshirtForm(form)

{

textAreas3 = document.forms['frmCreateCheckboxRange'].qty_item_3.value;
var container3 = document.getElementById("areas3");
document.getElementById("areas3").className = "textboxwide";
var shirtText = "<b>Please select a size and a color:</b><br />";
var newtext1 = document.createTextNode(" Red ");
var para1 = document.getElementById("areas3");
var newtext2 = document.createTextNode(" White ");

    for(i=0; i<form; i++)
    {

        alert(form);
        field1 = document.createElement("input");
        field1.type = "radio";
        field1.name = "color";
        field1.id = "red";
        field1.value = "Red";

        field2 = document.createElement("input");
        field2.type = "radio";
        field2.name = "color";
        field2.id = "white";
        field2.value = "White";

        para1.appendChild(newtext1);
        document.getElementById("areas3").appendChild(field1);
        para2.appendChild(newtext2);
        document.getElementById("areas3").appendChild(field2);



    }


}

Answer 1

Этот код выглядит немного грязно, вы повторяете document.getElementById("areas3") много раз, вам нужно только один раз получить элемент.

Я считаю, что, как правило, намного проще использовать функцию innerHTML для изменения веб-сайта.

document.getElementById("areas3").innerHTML=
"<a href='http://stackoverflow.com'>Stack Overflow<\/a>"

По сути, просто сгенерируйте нужную вам строку HTML и задайте для этой строки функцию innerHTML элемента, все, что уже содержит элемент, будет перезаписано.