To create a new node:
1 <script type= "Text/javascript" >2 var newnode=document.createelement ("div" ); 3 Newnode.classname= "Content"; 4 Newnode.innerhtml= "This is a newly created node"; 5 </script>1<input type= "button" value= "Add" onclick= "Insertnode ()"/>2<script type= "Text/javascript" >3 varNewnode=document.createelement ("div");4Newnode.classname= "Content";5Newnode.innerhtml= "This is a newly created node";6 functionInsertnode () {7 //increase the child node of the body tag8 Document.body.appendChild (newNode);9 }Ten</script>
Make a game of guessing numbers:
1<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"2"Http://www.w3.org/TR/html4/strict.dtd" >3 456<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>7<title> Guessing numbers games </title>8<style type= "Text/css" >9 #title {Tenmargin:0Auto; One position:relative; A left:20px; - } - #result { the height:400px; - width:600px; -margin:0Auto; - border:1px solid gray; + } - div{ +margin:0Auto; Amargin-top:20px; at height:50px; - width:400px; - } -</style> -<script src= "Js/caishuzi.js" type= "Text/javascript" charset= "Utf-8" ></script> - in -<body onload= "reload ()" > to<div id= "title" > + -</div> the<div id= "Result" > *<div id= "text0" class= "TXT" > $ The result of your speculation is:Panax Notoginseng</div> - the</div> +<div> A<span> Please enter the number you guessed:</span> the<input type= "text" name= "" id= "number" value= ""/> +<input type= "button" id= "BTN1" value= "Confirm" onclick= "vertifynum ()"/> -</div> $</body> $//set a random numbervarTestnum =math.random (); Testnum= Math.floor (testnum*100);//number of guesses Ivari = 1;//determines whether the number of outputs is equal to the set random number,//1, if equal, output "Congratulations, guess right", and the confirmation key becomes unavailable//2, if not equal, output "I guess, guess the number is large"/"I guess, guess the number is small"//3, when the number of guesses reached the fifth time, and all guessed wrong, output "Sorry you have run out of opportunities, welcome to come again next time"//and makes the Confirm key unavailablefunctionVertifynum () {//gets the input number and assigns the value to num varnum = document.getElementById ("number"). Value; //Gets the parent node where the content was added varobj = document.getElementById ("Result"); if(num = = testnum) {//determine if the input number num is equal to the set random number testnum, if equal, the output "Congratulations, in the first" +i+ "times, you guessed it", and make the "Confirm key" is not available. varNewNode = document.createelement ("div"); Obj.appendchild (NewNode); //Add the output element as a child node that provides the output locationNewnode.id = "text" +i; NewNode.style.color= "Firebrick"//color of the output fontnewnode.innerhtml = "Congratulations, in the first" +i+ ", you guessed it"; document.getElementById ("BTN1"). Disabled = "disabled";//make "Confirm key" unavailable}Else if(Num >testnum) { varNewNode = document.createelement ("div");//determine if the input number num is greater than testnum, if, output "" Sorry, you guessed big! You are now the first "+i+" Guess wrong! ""Obj.appendchild (NewNode);//Add the output element as a child node that provides the output locationNewnode.id = "text" +i; NewNode.style.color= "Red"newnode.innerhtml= "Sorry, you guessed big!" You are now the first "+i+" Guess wrong! "if(i = = 5) {//determine if the number of outputs is 5, and if so, "confirm key" is not availabledocument.getElementById ("BTN1"). Disabled = "Disabled"; } I++; } Else{ varNewNode = document.createelement ("div");//determine if the input number num is greater than testnum, if, output "" Sorry, you guessed small! You are now the first "+i+" Guess wrong! ""Obj.appendchild (NewNode);//Add the output element as a child node that provides the output locationNewnode.id = "text" +i; NewNode.style.color= "Red"newnode.innerhtml= "Sorry, you guessed small!" You are now the first "+i+" Guess wrong! "if(i = = 5) {//determine if the number of outputs is 5, and if so, "confirm key" is not availabledocument.getElementById ("BTN1"). Disabled = "Disabled"; } I++; }}//Page refresh makes, page replyfunctionReload () {document.getElementById ("BTN1"). Disabled = ""; I= 1;}
Application of child nodes
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
