Home > Developer > Web Develop
Native JS implements the creation and deletion of element instance code:
In practical applications, it is often necessary to dynamically create and delete the specified elements, and the following is an example of how to implement this function through code examples.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">#thediv{width:200px;Height:300px;Border:1px solid Green;}</style><Scripttype= "Text/javascript"> functioncreat () {varlinkelement=Document.createelement ("a"); Linkelement.href="http://www.softwhy.com"; Linkelement.innerhtml="Ant Tribe"; Linkelement.id="Theid"; varOdiv=document.getElementById ("Thediv"); Odiv.appendchild (linkelement); } functiondel () {varOdiv=document.getElementById ("Thediv"); Odiv.removechild (document.getElementById ("Theid")); } window.onload=function(){ varCREATBT=document.getElementById ("CREATBT"); varDebt=document.getElementById ("Debt"); Creatbt.onclick=function() {creat ()} Debt.onclick=function() {del ()}}</Script> </Head><Body> <inputtype= "button"ID= "CREATBT"value= "Create a hyperlink dynamically"/> <inputtype= "button"ID= "Debt"value= "Dynamic deletion of added elements"/> <DivID= "Thediv"></Div> </Body> </HTML>
The above code to achieve our requirements, click on the corresponding button can add or remove elements, the code is very simple to introduce, specifically, you can refer to the relevant reading.
Related reading:
The 1.document.createelement () function can refer to the chapter of the function of the createelement () and appendchild () functions of JS .
The 2.removeChild () function can refer to the removechild () function usage of JavaScript in a detailed chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=11846
For more information, refer to: http://www.softwhy.com/javascript/
Native JS implementation of creating and deleting element instance code
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
