Editing this question as a bit of a rewrite.Say on a page I have my usual 3 files. css, html, js.I've added a div class to the css but not the HTML.CSS:\[code\]div#myClass{width:100%;}div.forDynamicContent{/*whatever*/}\[/code\]Heres some html\[code\]<div id="myClass"> <!-- In here is where I would like to dynamically add my dynamicContent div and the elements within it--></div>\[/code\]Now heres the tricky bit
Ignore any spelling mistakes or small things. Its hard written, not copied)Javascript:var parentElement = document.getElementsById("myClass");\[code\]var textElement = document.createElement("input");textElement.setAttribute("type", "textarea");textElement.setAttribute("value", "textarea");textElement.setAttribute("name", "textarea");parentElement.appendChild(textElement);console.log("textAreaCreated");\[/code\]This adds an element to the html and the final result in the html is something like this.\[code\]<div id="myClass"> <textArea name="textarea" type="textarea">textArea</textArea></div>\[/code\]What Im trying to do is have the output be like the following:\[code\]<div id="myClass"> <div class="forDynamicContent"> <textArea name="textarea" type="textarea">textArea</textArea> </div></div>\[/code\]So basically I want to systematically create the div based on whats in the css file and then populate it. I really hope this is a lot clearer than the last part of the question****************************************************************Reqjust having trouble with this one. When creating elements and adding them to something, how do I create a div and specify them to be inside said div.My JAVASCRIPT for creating 2 elements\[code\]function addMyCustomElementsToDiv(newElementNameSrc,newElementType,elementsClass,idOfWhereYouWantIt){//target where you want the object placedvar foo = document.getElementById(idOfWhereYouWantIt);console.log(foo);//create the buttonvar t = document.getElementById(newElementNameSrc);var newElementName =t.value;var element = document.createElement("input");element.setAttribute("type", newElementType);element.setAttribute("value", newElementName);element.setAttribute("name", newElementName);element.setAttribute("id", newElementName);element.setAttribute("class", elementsClass);// Define the onclick commandvar onClickCommand = "shanesViewColumnInfo('"+newElementName+"');";console.log(onClickCommand);//element.setAttribute("onclick",onClickCommand);foo.appendChild(element);console.log(newElementType.toString() +" added");//add the columnInfo specified by Shekvar backButton = document.createElement("button");backButton.setAttribute("type", "button");backButton.setAttribute("value", newElementName+"-back-button");backButton.setAttribute("name", newElementName+"-back-button");backButton.setAttribute("class","comments-box","column-information");backButton.setAttribute("id",newElementName +"-back-button");foo.appendChild(backButton);\[/code\]You may notice there is already an element called foo which is the parent element. But this will not suit if i set it to the div as the div only exists in the CSS and has no html implementation.I realize the goal might sound a bit hazy so hopefully this will clarify.1:click button2:add div element to HTML2:create number of elements4:Add them to within the created div I suppose 2 is the one I might be slipping up on.http://programming.top54u.com/Sampl...M/Create-Div-Element-Dynamically/Default.aspxafter looking at this. Perhaps a better way to go would be to create the div and then set the InnerHtml to be all element.toHTML()Any thoughts?
Ignore any spelling mistakes or small things. Its hard written, not copied)Javascript:var parentElement = document.getElementsById("myClass");\[code\]var textElement = document.createElement("input");textElement.setAttribute("type", "textarea");textElement.setAttribute("value", "textarea");textElement.setAttribute("name", "textarea");parentElement.appendChild(textElement);console.log("textAreaCreated");\[/code\]This adds an element to the html and the final result in the html is something like this.\[code\]<div id="myClass"> <textArea name="textarea" type="textarea">textArea</textArea></div>\[/code\]What Im trying to do is have the output be like the following:\[code\]<div id="myClass"> <div class="forDynamicContent"> <textArea name="textarea" type="textarea">textArea</textArea> </div></div>\[/code\]So basically I want to systematically create the div based on whats in the css file and then populate it. I really hope this is a lot clearer than the last part of the question****************************************************************Reqjust having trouble with this one. When creating elements and adding them to something, how do I create a div and specify them to be inside said div.My JAVASCRIPT for creating 2 elements\[code\]function addMyCustomElementsToDiv(newElementNameSrc,newElementType,elementsClass,idOfWhereYouWantIt){//target where you want the object placedvar foo = document.getElementById(idOfWhereYouWantIt);console.log(foo);//create the buttonvar t = document.getElementById(newElementNameSrc);var newElementName =t.value;var element = document.createElement("input");element.setAttribute("type", newElementType);element.setAttribute("value", newElementName);element.setAttribute("name", newElementName);element.setAttribute("id", newElementName);element.setAttribute("class", elementsClass);// Define the onclick commandvar onClickCommand = "shanesViewColumnInfo('"+newElementName+"');";console.log(onClickCommand);//element.setAttribute("onclick",onClickCommand);foo.appendChild(element);console.log(newElementType.toString() +" added");//add the columnInfo specified by Shekvar backButton = document.createElement("button");backButton.setAttribute("type", "button");backButton.setAttribute("value", newElementName+"-back-button");backButton.setAttribute("name", newElementName+"-back-button");backButton.setAttribute("class","comments-box","column-information");backButton.setAttribute("id",newElementName +"-back-button");foo.appendChild(backButton);\[/code\]You may notice there is already an element called foo which is the parent element. But this will not suit if i set it to the div as the div only exists in the CSS and has no html implementation.I realize the goal might sound a bit hazy so hopefully this will clarify.1:click button2:add div element to HTML2:create number of elements4:Add them to within the created div I suppose 2 is the one I might be slipping up on.http://programming.top54u.com/Sampl...M/Create-Div-Element-Dynamically/Default.aspxafter looking at this. Perhaps a better way to go would be to create the div and then set the InnerHtml to be all element.toHTML()Any thoughts?