添加、删除元素

来源:互联网 发布:淘宝商城源码 编辑:程序博客网 时间:2024/06/10 22:32

1、如何动态的创建html元素

1.动态的添加到document文档中

基本步骤:

1)       创建元素(createElement)

2)       给新的元素添加必要的信息

3) 将元素添加到指定的位置appendChild,比如div body

<scriptlanguage="javascript">

function test(){

//创建元素

//写希望创建的元素的标签名字

varmyElement=document.createElement("a");

var myElement2=document.createElement("input");

//给新的元素添加必要的信息

myElement.href="http://www.baidu.com";

myElement.innerText="连接到百度";

myElement.id="id1";

myElement2.type="button";

myElement2.value="我是按钮";

//可以指定位置

/*myElement.style.left="200px";

myElement.style.top="300px";

myElement.style.position="absolute";

//将元素添加到document.body上去

document.body.appendChild(myElement);*/

//将元素添加到div上去

document.getElementById("div").appendChild(myElement);

document.getElementById("div").appendChild(myElement2);

}

</script>

 

2.动态的删除document文档中的元素(removeChild)

function test2(){

 //删除一个元素(删除一个元素的是有前提的:必须获得父元素)

 //这是第一种方法(不灵活)

 //document.getElementById("div").removeChild(document.getElementById("id1"));

 //第二种方法比较灵活(推荐)这种方法不知道父元素id也能获得父元素

//window.alert(document.getElementById("id1").parentNode.id);//测试可以返回父元素id

          document.getElementById("id1").parentNode.removeChild(document.getElementById("id1")); 

 }

<body>

<inputtype="button" value="动态的创建一个超链接"onclick="test()"/>

<inputtype="button" value="删除一个元素id为id1的"onclick="test2()"/>

<divid="div" style="width:200px;height:400px; border:1px solidred;">div</div>

</body>

0 0
原创粉丝点击