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="动态的创建一个超链接"οnclick="test()"/>
<inputtype="button" value="删除一个元素id为id1的"οnclick="test2()"/>
<divid="div" style="width:200px;height:400px; border:1px solidred;">div</div>
</body>
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
