javascript - ラジオボタンにダイナミックラベルを付ける

Question

動的フォームを作成しようとしているので、ボタンをクリックするだけでJavascript関数を呼び出します。関数は次のとおりです。

function addradiobutton(type){
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);   

    var foo = document.getElementById("fooBar");
    //Append the element in page (in span).
    foo.appendChild(element);
    counter=counter+1;
 }

このコードはラジオボタンを追加し、そのタグは次のようになります

<input type="radio" name="radio" value="radio">

しかし、私はこのコードをこのようにしたいと思います。

 <input type="radio" name="radio" value="radio">WATER</input>

入力タグを閉じてもかまいませんが、コードの最後に値「Water」を取得したいと思います。
水を例にとると、その値も動的になります。
私は何をすべきか ？

Answer 1

これを試して

<script type="text/javascript">
        var counter = 0;
        function addradiobutton(type, text) {
            var label = document.createElement("label");

            var element = document.createElement("input");
            //Assign different attributes to the element.
            element.setAttribute("type", type);
            element.setAttribute("value", type);
            element.setAttribute("name", type);

            label.appendChild(element);
            label.innerHTML += text;

            var foo = document.getElementById("fooBar");
            //Append the element in page (in span).
            foo.appendChild(label);
            counter = counter + 1;
        }
        addradiobutton("radio", "Water");
</script>

Answer 2

<input type="radio" name="radio" value="radio">WATER</input>

…は無効なHTMLです。あなたが表現しようとしていることを表現する方法は次のとおりです。

<label><input type="radio" name="radio" value="radio">WATER</label>

appendChildラベル要素を作成してから、入力要素とテキストノードの両方を作成する必要があります。

var label, input;
label = document.createElement('label');
input = document.createElement('input');
// Set type, name, value, etc on input
label.appendChild(input);
label.appendChild('Water');
foo.appendChild(label);

Answer 3

私が使用する解決策の1つは、そのように作成するのではなく、それ以上のものを作成することです:(構文を単純化するためにjQueryを使用）

<div id="buttons">

</div>

<scrpit>
    var temp;
    temp = '<label><input type="radio" name="radio" value="radio" />WATER</label>';
    temp + '<label><input type="radio" name="radio" value="radio" />WATER1</label>';
    $('#buttons').html(temp);
</script>

テストされていませんが、ロジックは機能するはずです。エラーがないか更新してみます。

xの量が必要な場合は、forループをxにループしてそれらを反復処理する関数に入れることができます。例：

<script>
    function addButtons(number){
        for(var i=0;i<number;i++){
            // do the string appending here
        }
    }
</script>

Answer 4

これは機能するはずです。

element.setAttribute("innerHTML","WATER");