Home > Developer > JavaScript
The advanced chapter of document provides functions for node operations, including: acquiring nodes, changing nodes, deleting nodes, replacing nodes, creating nodes, adding nodes, cloning nodes, and so on. We can use these functions to dynamically change the HTML nodes.
1. JavaScript ___|
————————————————————————————————————————————————————————
<script type= "Text/javascript" >
function Test1 () {//ID of the node in the same time case
var myhref = document.getElementById (' same ');
Window.alert (Myhref.innertext);
}
function Test2 () {//Output node value
var hobbies = Document.getelementsbyname ("hobby");
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked) {
Window.alert ("Your hobby is:" + hobbies[i].value);
}
}
}
function Getn () {//tag to get the value of the label
var myObj = document.getelementsbytagname (' input ');
for (var i = 0; i < myobj.length; i++) {
Window.alert (Myobj[i].value);
}
}
function Addtags () {//Dynamic Add Hyperlink node <a></a>
(1) Creating Elements <a>
var myelement = document.createelement ("a")
(2) Add necessary marking information to the element
Myelement.href = "http://www.sina.com";
Myelement.innertext = "Connect to Sina";
MyElement.style.left = "200px";
MyElement.style.top = "300px";
MyElement.style.position = "absolute";
Add to Document.body
Document.body.appendChild (myelement);
}
var i = 1;
function Addinput () {//Add INPUT Element
var myelement = document.createelement (' input ');
Myelement.type = "button";
Myelement.value = "Run It";
Myelement.id= "i++";
Myelement.id = "ID1";
document.getElementById ("Div1"). AppendChild (myelement);
}
function Deleteinput () {
The premise of deleting an element is to know what its parent element is. This method is not very flexible
Method One
document.getElementById ("Div1"). RemoveChild (document.getElementById (' id1 '));
Method Two
document.getElementById (' Id1 '). Parentnode.removechild (document
. getElementById (' id1 '));
}
</script>
Calls in the 2.body body
——————————————————————————————————————————
<body>
<a id= "Same" href= "http://www.sohu.com" > Sohu </a>
<a id= "Same" href= "http://www.baidu.com" > Baidu </a>
<a id= "Same" href= "http://www.sina.com" > Sina </a>
<input type= "button" value= "Submit" onclick= "test1 ()"/>
<!--ID is the same when you only know the first one--
<input type= "checkbox" name= "Hobby" value= "basketball"/> Basketball
<input type= "checkbox" name= "hobby" value= "soccer"/> Soccer
<input type= "checkbox" name= "hobby" value= "Volleyball"/> Volleyball
<input type= "button" value= "Submit" name= "testing" onclick= "test2 ()"/>
<!--<input type= "button" value= "Smart get" onclick= "Getn ()" >
<input type= "button" value= "smart Add" onclick= "Addtags ()"/>
<div style= "width:400px;height:300px;border:3px dashed red;" id= "Div1" ></div>
<input type= "button" onclick= "Addinput ()" value= "Inputadd"/>
<input type= "button" onclick= "Deleteinput ()" value= "Inputdelete"/>
</body>
Dynamic tagging in the document of JavaScript
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
