JavaScript動態增加節點和刪除節點
阿新 • • 發佈:2019-01-12
其實HTML就是類似於XML,曾經W3C希望使用XML替代HTML,這就是說明,HTML和XML還是有一定的共同特點
的,所以說,對於XML,我們有解析和動態增加或者減少節點的功能,這個如果用在HTML上面,那就是能動態的增加
一些按鈕,超連結等等的HTML元素,這樣的網頁動態效果會更好,下面我們來一個小例子說明一下,這個例子能動態
的增加一些按鈕和動態的刪除一些按鈕.程式碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>test9.html</title> <script type="text/javascript"> function test(){ //建立元素 var myElement = document.createElement("input" );//輸入想要建立的型別 myElement.type="button"; myElement.value="我是按鈕"; myElement.id="id1"; //將元素新增到指定的節點 document.getElementById("div1").appendChild(myElement); // document.body.appendChild(myElement); } function test1(){ //刪除一個元素 // document.getElementById("div1").removeChild(document.getElementById("id1")); //第二種方式靈活 document.getElementById("id1").parentNode.removeChild(document.getElementById("id1")); } </script> </head> <body> <input type="button" onclick="test();" value="動態的建立一個按鈕"><br/> <input type="button" onclick="test1();" value="刪除按鈕"/> <div id="div1" style="width:200px;height: 400px;border: 1px solid red;"> </div> </body></html>
這裡就使用document 的大部分方法進行增加和刪除節點的作用,呵呵,其實document是一個功能非常強大的Dom 物件。
下面再寫一個對於document的 name的迭代方法,處理對於複選框如何獲取所有的選項並且打印出來的
程式碼如下
<!sDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>test8.html</title> <script type="text/javascript"> function test(){ var hobbys = document.getElementsByName("hobby"); for(var i =0; i < hobbys.length; i++){ //判斷是否被選擇 if(hobbys[i].checked){ window.alert("您的愛好是"+hobbys[i].value); } } } </script> </head> <body> 請選擇你的愛好: <input type="checkbox" name="hobby" value="足球"/>足球<br/> <input type="checkbox" name="hobby" value="籃球"/>籃球<br/> <input type="checkbox" name="hobby" value="旅遊"/>旅遊<br/> <input type="button" value="測試" onclick="test();"> </body></html>
再分享一下我老師大神的人工智慧教程吧。零基礎!通俗易懂!風趣幽默!還帶黃段子!希望你也加入到我們人工智慧的隊伍中來!https://blog.csdn.net/jiangjunshow