How can I better dynamically generate radio buttons and text labels into a span?

How can I get this function to write dynamically generated radio buttons

A) more elegantly...like in jQuery...

B) or at开发者_如何学编程 least how to automatically generate radio buttons with text labels of Something and SomethingElse (equal to the quantity entered into a text field that fires the function call) into a span called areas3. Thanks!

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



    }


}

That code looks a bit messy, you repeat document.getElementById("areas3") a lot of times, you only need to fetch an element once.

I find that it is typically a lot simpler to use the innerHTML feature to alter a website.

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

Basically just generate a string of the HTML you need and set the innerHTML feature of an element to that string, anything the element already contain will be overwritten.