如何更好地动态生成一个单选按钮和文本标签到一个跨度？

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功能设置为该字符串，该元素已包含的所有内容都会被覆盖。