dynamically create div element using javascript

Question

I am trying to create html elements dynamically using javascript. For example, when creating a paragraph in my "finalXML" file, I use the syntax below:

function paragraph (finalXML, value)

{

var code1 = 'var para = document.createElement("p");
var t = document.createTextNode("This is the paragraph that should be displayed");
para.appendChild(t);
document.body.appendChild(para);'

return String(finalXML).replace(/add_paragraph_here/g,code1);
}

How would I go about creating a div with radio buttons, for example, using the same process? Can anyone help me with that syntax?

possible duplicate of [In HTML, with Javascript, create new radio button and its text?](http://stackoverflow.com/questions/23430455/in-html-with-javascript-create-new-radio-button-and-its-text) — Keval Bhatt, Jul 13 '15 at 06:15
http://stackoverflow.com/questions/23430455/in-html-with-javascript-create-new-radio-button-and-its-text — Keval Bhatt, Jul 13 '15 at 06:15
@KevalBhatt, I have an html document bearing just placeholder text (eg. "radio_buttons_go_here"). I have a separate javascript document to dynamically create the radio buttons. I need 2 sets of 5 radio buttons each. I am not sure the post you reference does the same thing. Any thoughts please? — HumaniTech, Jul 13 '15 at 06:31
You can't have carriage returns in string literals like that. If you are doing simple string replace, then replace "radio_buttons_go_here" with the required markup, e.g. `"...."`. — RobG, Jul 13 '15 at 06:31
@RobG I am trying to replace the string with a set of 5 radio buttons that have different values (yes, no, maybe, etc...). I was thinking of creating a function that I could then call twice to do that for the 2 sets of 5 radio buttons needed. When you say "simple string replace", are you thinking that the function is unnecessary in this case? I can't seem to nail down the syntax for the div creating the radio buttons after declaring the variables within the function. Any thoughts? — HumaniTech, Jul 13 '15 at 06:50
@HumaniTech yes it is poassible i will post answer regarding that — Keval Bhatt, Jul 13 '15 at 07:02

score 0 · Answer 1 · answered Jul 13 '15 at 07:12

0

see this example: http://jsfiddle.net/kevalbhatt18/owuqm8j8/

 var radio_home = document.getElementById("radio_home");

 function makeRadioButton(options) {
     var div = document.createElement("div");
     for (var i = 0; i < options.length; i++) {
         var label = document.createElement("label");
         var radio = document.createElement("input");
         radio.type = "radio";
         radio.name = options[i].name;
         radio.value = options[i].value;
         label.appendChild(radio);
         label.appendChild(document.createTextNode(options[i].text));
         div.appendChild(label);
         }
       radio_home.appendChild(div);
 }
 var options = [{
     name: "first",
     value: "yes",
     text: "yes"
 }, {
     name: "first",
     value: "no",
     text: "no"
 }]
  var options2 = [{
     name: "second",
     value: "ohhh yes",
     text: "ohhh yes"
 }, {
     name: "second",
     value: "ohhh no",
     text: "ohhh no"
 }]
makeRadioButton(options);
makeRadioButton(options2);

answered Jul 13 '15 at 07:12

Keval Bhatt

6,224
2
24
40

thank you. I placed the div id in my html document and I am running the javascript file through node js. It is giving me a "document is not defined" error, under the "var radio_home = document.getElementById("radio_home");" line. How do I fix or get around that error? Any thoughts? – HumaniTech Jul 13 '15 at 07:48
do one thing radio_home.appendChild(div); replace with document.body.appendChild(div);' because in your case you are appending elements in body can you Provide your implementIon ? – Keval Bhatt Jul 13 '15 at 08:34
I replaced the code as you suggested but I am still getting the "document is not defined" error. Scanning through some of the similar posts here, it seems like something about node not supporting DOM APIs. Any thoughts or workarounds on that? None of the ones I've seen have worked. I appreciate your help. – HumaniTech Jul 13 '15 at 17:39
@HumaniTech can you provide what you implemented. and it think when you call document at that time your windows.document is not initialized http://stackoverflow.com/questions/24647839/referenceerror-document-is-not-defined-in-plain-javascript – Keval Bhatt Jul 14 '15 at 04:04
@HumaniTech i asked you 3 times please Provide code what is you implemented so that i can look into it see this example http://jsfiddle.net/kevalbhatt18/owuqm8j8/1/ – Keval Bhatt Jul 14 '15 at 04:06
@HumaniTech and have you passed Proper string from node server ? – Keval Bhatt Jul 14 '15 at 04:12
I have posted the code at the link above, in my previous comment. Any thoughts? – HumaniTech Jul 14 '15 at 21:45
@HumaniTech i see your code its working ? what type of error you are facing – Keval Bhatt Jul 15 '15 at 04:31
thank you. When I run it on node.js it throws the error "document is not defined" instead of creating the radio buttons. It gives the line of the error as "var radio_home = document.getElementById("radio_home");" – HumaniTech Jul 15 '15 at 06:58

dynamically create div element using javascript

1 Answers1