javascript and jquery create html element examples dynamically

  • 2021-07-04 18:10:58
  • OfStack

This article illustrates how javascript and jquery dynamically create html elements. Share it for your reference, as follows:

1. javascript Create Element

Create 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 Create Element


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 can check the topics of this site: "Summary of JavaScript Switching Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Effects and Skills", "Summary of JavaScript Error and Debugging Skills", "Summary of JavaScript Data Structure and Algorithm Skills", "Summary of JavaScript Traversal Algorithms and Skills" and "Summary of JavaScript Mathematical Operation Usage"

I hope this article is helpful to everyone's JavaScript programming.


Related articles: