基于dom编程中 动态创建与删除元素的使用
基于dom编程中 动态创建与删除元素的使用
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:functiontest(){//createElement()创建一个指定标签名的元素[比如:动态创建超链接]varcr...

复制代码 代码如下:

<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标签"/><br/>

<input type="button" value="删除创建一个a标签"/>

<div id="div1">

</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标签"/><br/>

<input type="button" value="删除创建一个a标签"/>

<div id="div1">

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类