基于dom編程中 動(dòng)態(tài)創(chuàng)建與刪除元素的使用
更新時(shí)間:2013年04月17日 14:26:34 作者:
本篇文章小編將為大家介紹,基于dom編程中動(dòng)態(tài)創(chuàng)建與刪除元素的使用,有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function test(){
//createElement() 創(chuàng)建一個(gè)指定標(biāo)簽名的元素[比如:動(dòng)態(tài)創(chuàng)建超鏈接]
var createa=document.createElement("a");
createa.id="a1";
createa.innerText="連接到百度";
createa.;
//createa.color="green" ////添加顏色(不要忘記style屬性,不然沒有效果)
createa.style.color="green"
//添加默認(rèn)位置--body 并且添加子節(jié)點(diǎn)
//document.body.appendChild(createa);
//放置指定位置
document.getElementById("div1").appendChild(createa);
}
function test2(){
//指定位置刪除節(jié)點(diǎn)removeChild()
document.getElementById("div1").removeChild(document.getElementById("a1")); //id 名重復(fù) js只取第一個(gè)
}
</script>
</head>
<body>
<!--動(dòng)態(tài)創(chuàng)建元素-->
<input type="button" value="創(chuàng)建一個(gè)a標(biāo)簽" onclick="test()"/><br/>
<input type="button" value="刪除創(chuàng)建一個(gè)a標(biāo)簽" onclick="test2()"/>
<div id="div1" style="width:400px;height:300px;border:1px solid silver">
</div>
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function test(){
//createElement() 創(chuàng)建一個(gè)指定標(biāo)簽名的元素[比如:動(dòng)態(tài)創(chuàng)建超鏈接]
var createa=document.createElement("a");
createa.id="a1";
createa.innerText="連接到百度";
createa.;
//createa.color="green" ////添加顏色(不要忘記style屬性,不然沒有效果)
createa.style.color="green"
//添加默認(rèn)位置--body 并且添加子節(jié)點(diǎn)
//document.body.appendChild(createa);
//放置指定位置
$("div1").appendChild(createa);
}
function test2(){
//指定位置刪除節(jié)點(diǎn)removeChild()
$("div1").removeChild($("a1"));
}
//定義一個(gè)函數(shù) 返回給定id的對(duì)象
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<!--動(dòng)態(tài)創(chuàng)建元素-->
<input type="button" value="創(chuàng)建一個(gè)a標(biāo)簽" onclick="test()"/><br/>
<input type="button" value="刪除創(chuàng)建一個(gè)a標(biāo)簽" onclick="test2()"/>
<div id="div1" style="width:400px;height:300px;border:1px solid silver">
</div>
</body>
</html>
您可能感興趣的文章:
- 快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問題
- 基于JavaScript創(chuàng)建動(dòng)態(tài)Dom
- JS動(dòng)態(tài)創(chuàng)建DOM元素的方法
- javascript實(shí)現(xiàn)dom動(dòng)態(tài)創(chuàng)建省市縱向列表菜單的方法
- 詳解Python中DOM方法的動(dòng)態(tài)性
- 通過JS動(dòng)態(tài)創(chuàng)建一個(gè)html DOM元素并顯示
- js加載之使用DOM方法動(dòng)態(tài)加載Javascript文件
- 關(guān)于動(dòng)態(tài)生成dom綁定事件失效的原因及解決方法
相關(guān)文章
javascript學(xué)習(xí)筆記整理(概述、變量、數(shù)據(jù)類型簡(jiǎn)介)
這篇文章主要介紹了javascript學(xué)習(xí)筆記整理(概述-變量-數(shù)據(jù)類型),需要的朋友可以參考下2015-10-10JavaScript中的setMilliseconds()方法使用詳解
這篇文章主要介紹了JavaScript中的setMilliseconds()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06javascript函數(shù)中的arguments參數(shù)
arguments當(dāng)然只在function體內(nèi)才有意義, arguments.length 返回的是傳入function的實(shí)參個(gè)數(shù)2010-08-08推薦JavaScript實(shí)現(xiàn)繼承的最佳方式
本文是介紹了實(shí)用call方法結(jié)合原型鏈方法來實(shí)現(xiàn)javascript繼承的最佳方式,非常的實(shí)用,有需要的小伙伴可以參考下2014-11-11