如何在单击按钮时用较新的单选按钮替换单选按钮

Question

下面是在按钮单击时创建单选按钮的代码，但我希望它在每次按钮单击时用新生成的单选按钮替换以前的单选按钮，而不是仅仅附加到旧的单选按钮。 有人可以帮忙吗。

<div id="radio_home">
            <input type="button" name="check" value="GENERATE RADIO BUTTON" onclick="gen();"><br/>
        </div>
        
        
        <script>
            var radio_home=document.getElementById("radio_home");
            
            function makeRadioButton(name, value, text){
            
                var label=document.createElement("label");
                var radio=document.createElement("input");
                radio.type="radio";
                radio.name=name;
                radio.value=value;
                label.appendChild(radio);
                label.appendChild(document.createTextNode(text));
            return label;
            }
            
            function gen(){
                var yes_button=makeRadioButton("yesbutton", "yes", "Oh Yea! DO it");
                radio_home.appendChild(yes_button);
                
                var no_button=makeRadioButton("nobutton", "no", "Oh No! DON'T do it");
                radio_home.appendChild(no_button);
                
            }

Answer 1

您可以像这样简单地更改元素的 innerHTML

radio_home.innerHTML = ""; //to empty the inner HTML of radio_home

radio_home.appendChild(yes_button); //then append child to it

您还需要将按钮从 radio_home div 中取出，因为一旦您清空 innerHTML，它将被删除