Home > Developer > JavaScript
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>67<body>8<input type= "button" onclick= "AddEle1 ()" value= "+" >9<input type= "button" onclick= "AddEle2 ()" value= "+ +" >Ten One<div id= "I1" ></div> A -<script> - the functionAddEle1 () {
The way the string - //Create a label - //add tags to i1 inside - varTag = "<p><input type= ' text ' ></p>";
//Note that the first parameter can only be "Beforebegin", "Afterbegein", "BeforeEnd", and"Afterend" represent the inserted position respectively
+document.getElementById (' I1 '). insertAdjacentHTML ("Beforebegin", tag); - } + A functionAddEle2 () {
Object-oriented approach at //Create a label - //add tags to i1 inside - varTag = document.createelement (' input ');//Create input label -Tag.setattribute (' type ', ' text ');//Set Label Type -tag.style.fontSize = ' 16px ';//Setting label Properties -Tag.style.color = ' red ';//Setting label Properties in -Document.createelement (' P ');//Create a P tag toP.appendchild (tag);//Add the created input label to the P tag +document.getElementById (' I1 '). appendchild (P);//add P tag to div with ID 1 - the } * $ Panax Notoginseng</script> - the + A the</body> +Knowledge Point: CreateElement ("") Create label
AppendChild () Add a sub-label
Effects such as:
The content is entered by itself in order to demonstrate that the first method sets the Text property
JavaScript two ways to create labels, implement a click button to make text self-increment
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
