管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

基于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>

教程首页 更多教程