復制代碼 代碼如下:
<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>