JavaScript and jquery dynamic creation of HTML elements sample _javascript Tips

This example describes the way JavaScript and jquery dynamically create HTML elements. Share to everyone for your reference, specific as follows:

1.javascript Creating elements

Create a Select

var select = Document.createelement ("select");
Elect.options[0] = new Option ("Add-in 1", "value1");
SELECT.OPTIONS[1] = new Option ("Add-in 2", "value2");
Select.size = "2";
Testdiv.appendchild (select);

Create Div

var opendiv = document.createelement ("div");
Opendiv.id = "Div3d";
OpenDiv.style.width = w+ "px";
OpenDiv.style.height = h+ "px";
opendiv.innerhtml = strhtml;
Document.body.appendChild (OPENDIV);

2.jquery Creating elements

function CreateDOM () {
   var select = $ ("<select/>"). Appendto ($ ("body"));
   var option1 = $ ("<option value=\" 1\ ">text1</option>"). Appendto (select);
   var option2 = $ ("<option value=\" 2\ ">text2</option>"). Appendto (select);
   var Option3 = $ ("<option value=\" 3\ ">text3</option>"). Appendto (select);
   var text = $ ("<input type=\" text\ ">"). css ({"width": "150px", "Border": "1px Lightgrey Solid"}). Appendto ($ ("body") );
   var checkbox = $ ("<input type=\" checkbox\ "/>"). Appendto ($ ("body"));
   var ul = $ ("<ul/>"). Appendto ($ ("body"));
   var li = $ ("<li>li1</li>"). APPENDTO (UL);
   var li = $ ("<li>li2</li>"). APPENDTO (UL);

More readers interested in JavaScript-related content can view the site topics: "JavaScript switching effects and tips summary", "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and tips summary", " JavaScript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical calculation usage Summary

I hope this article will help you with your JavaScript programming.