document的高級篇中提供了節點操作的函數，具體包括：獲取節點，改變節點，刪除節點，替換節點，創建節點，添加節點，克隆節點等函數。我們可以利用這些函數動態改變html的節點。
1、JavaScript
<script type="text/javascript">function test1(){//對個節點的ID相同時候的情況var myhref = document.getElementById('same');window.alert(myhref.innerText);}function test2() {//輸出節點的值var hobbies = document.getElementsByName("hobby");for (var i = 0; i < hobbies.length; i++) {if (hobbies[i].checked) {window.alert("你的愛好是：" + hobbies[i].value);}}}function getN() {//通過標簽獲取標簽對應的值var myObj = document.getElementsByTagName('input');for (var i = 0; i < myObj.length; i++) {window.alert(myObj[i].value);}}function addtags() {//動態添加超鏈接節點<a></a>//(1)創建元素<a>var myElement = document.createElement("a")//(2)給元素添加必要的標示信息myElement.;myElement.innerText = "連接到新浪";myElement.style.left = "200px";myElement.style.top = "300px";myElement.style.position = "absolute";//添加到document.bodydocument.body.appendChild(myElement);}var i = 1;function addinput() {//添加input元素var myElement = document.createElement('input');myElement.type = "button";myElement.value = "奔跑吧";//myElement.id="i++";myElement.id = "id1";document.getElementById("div1").appendChild(myElement);}function deleteinput() {//刪除一個元素的前提是要知道其父元素是什么。此方法不是很靈活//方法一//document.getElementById("div1").removeChild(document.getElementById('id1'));//方法二document.getElementById('id1').parentNode.removeChild(document.getElementById('id1'));}</script>2.body體中的調用
<body><a id="same" >搜狐</a><a id="same" >百度</a><a id="same" >新浪</a><input type="button" value="提交" onclick="test1()"/><!-- ID相同的時候只認識第一個 --><hr/><input type="checkbox" name="hobby" value="籃球"/>籃球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="排球"/>排球<input type="button" value="提交" name="testing" onclick="test2()"/> <!-- <hr/><h1>獲取指定標簽的內容</h1><input type="button" value="智能獲取" onclick="getN()"> --><hr/><h1>智能添加標簽</h1><input type="button" value="智能添加" onclick="addtags()"/><hr/><h1>智能添加/刪除input</h1><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>
以上就是小編為大家帶來的javascript的document中的動態添加標簽實現方法全部內容了，希望大家多多支持武林網~
新聞熱點
疑難解答
