Add a radio inside .Innerhtml

Question

I am trying to add a radio/checkbox inside the .innerHTML for a program in JavaScript. Is there a way to add a radio box/checkbox inside a .Innerhtmljavascript codes Innerhtml part:

document.getElementById("demo").innerHTML = "I need a radiobox here";

score 0 · Answer 1 · answered Sep 17 '16 at 01:07

0

You just need to pass the html code for the radio button..

document.getElementById('demo').innerHTML = '<input type="radio" />'

answered Sep 17 '16 at 01:07

Sinned Lolwut

172
8

Thanks..I got my mistake – Sep 17 '16 at 01:18

score 0 · Answer 2 · answered Sep 17 '16 at 01:09

0

document.getElementById("demo").innerHTML = "<input id='radiobutton' type='radio' >text</input>";

<div id="demo" >
  
</div>

answered Sep 17 '16 at 01:09

Ali Heidari

3
2
5

Thanks A Ton I tried the same thing but did not know how that a " " was needed for the code..again thanks – Sep 17 '16 at 01:16

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

instead of innerHTML, a better way to insert a new element into your Document

Element.appendChild

var radio = document.createElement("input");
radio.type = "radio";
radio.name = "r1";
document.querySelector("#demo").appendChild(radio);

<label id="demo"></label>

Element.insertAdjacentHTML

document.querySelector("#demo").insertAdjacentHTML(
  "beforeend",
  "<input type='radio' name='r1'>"
);

<label id="demo"></label>

Available insertion points: 'beforebegin' 'afterbegin' 'beforeend' 'afterend'

innerHTML will rewrite your target Element content, losing previous input states and attached events etc. Read more here

Thanks...I will get rid of innerhtml got it – Sep 17 '16 at 01:35 — , Sep 17 '16 at 01:35

Add a radio inside .Innerhtml

3 Answers3

Element.appendChild

Element.insertAdjacentHTML