dom編程-動態建立、刪除元素
<html><head><script type="text/javascript"> function test(){ //createElement() 建立一個指定標籤名的元素[比如:動態建立超連結] var createa=document.createElement("a"); createa.id="a1"; createa.innerText="串連到百度"; createa.href="http://www.baidu.com"; //createa.color="green" ////添加顏色(不要忘記style屬性，不然沒有效果) createa.style.color="green" //添加預設位置--body 並且添加子節點 //document.body.appendChild(createa); //放置指定位置 document.getElementById("div1").appendChild(createa); } function test2(){ //指定位置刪除節點removeChild() document.getElementById("div1").removeChild(document.getElementById("a1")); //id 名重複 js只取第一個 }</script></head><body><!--動態建立元素--><input type="button" value="建立一個a標籤" onclick="test()"/><br/><input type="button" value="刪除建立一個a標籤" onclick="test2()"/><div id="div1" style="width:400px;height:300px;border:1px solid silver"></div></body></html>
代碼最佳化一下：
<html><head><script type="text/javascript"> function test(){ //createElement() 建立一個指定標籤名的元素[比如:動態建立超連結] var createa=document.createElement("a"); createa.id="a1"; createa.innerText="串連到百度"; createa.href="http://www.baidu.com"; //createa.color="green" ////添加顏色(不要忘記style屬性，不然沒有效果) createa.style.color="green" //添加預設位置--body 並且添加子節點 //document.body.appendChild(createa); //放置指定位置 $("div1").appendChild(createa); } function test2(){ //指定位置刪除節點removeChild() $("div1").removeChild($("a1")); } //定義一個函數 返回給定id的對象 function $(id){ return document.getElementById(id); }</script></head><body><!--動態建立元素--><input type="button" value="建立一個a標籤" onclick="test()"/><br/><input type="button" value="刪除建立一個a標籤" onclick="test2()"/><div id="div1" style="width:400px;height:300px;border:1px solid silver"></div></body></html>
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
