Home > Developer > JavaScript
Javascript dynamic div creation method, javascript dynamic div
This example describes how to dynamically create a div using Javascript. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Create a div using native javascript </title>
<Script>
Window. onload = function (){
Var Odiv = document. createElement ("div"); // create a div
Var Ospan = document. createElement ("span"); // create a span
Odiv.style.css Text = "width: 200px; height: 200px; background: #636363;
Text-align: center; line-height: 220px "; // create the css style of the div
// Odiv. id = "box"; // the id of the created div is box.
// Odiv. className = "Box"; // the class of the div is Box.
Odiv. appendChild (Ospan); // create a span in the div
Document. body. appendChild (Odiv); // create a div in the body
}
</Script>
</Head>
<Body>
</Body>
</Html>
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
