0

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?

Improve this question
6
  • possible duplicate of In HTML, with Javascript, create new radio button and its text? Commented Jul 13, 2015 at 6:15
  • stackoverflow.com/questions/23430455/… Commented Jul 13, 2015 at 6: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? Commented Jul 13, 2015 at 6: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. "<input type=radio value='foo'>....<input type=radio value='bar'>". Commented Jul 13, 2015 at 6: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? Commented Jul 13, 2015 at 6:50

1 Answer 1

Reset to default
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);

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

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?
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 ?
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 can you provide what you implemented. and it think when you call document at that time your windows.document is not initialized stackoverflow.com/questions/24647839/…
@HumaniTech i asked you 3 times please Provide code what is you implemented so that i can look into it see this example jsfiddle.net/kevalbhatt18/owuqm8j8/1
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.