动态的创建一个元素createElement及删除一个元素

前端技术 2023/09/01 JavaScript
复制代码 代码如下:

<html>
<script language = \"javascript\" type = \"text/javascript\">
function test(){
//创建元素
var myElement = document.createElement(\"a\");//a是想创建的html元素标签名
//给创建的元素添加必要的信息
myElement.href = \"http://www.baidu.com\";
myElement.innerText = \"连接到百度\";
myElement.id = \"id1\";
//myElement.style.top = \"300px\";
//myElement.style.left = \"500px\";
//myElement.style.position = \"absolute\";
//把创建的元素添加到body 对象上
//document.body.appendChild(myElement);
//将元素添加到div
document.getElementById(\"div1\").appendChild(myElement);
}
function test2(){
//删除一个元素
//也可以通过属性获得新增元素的父元素
//document.getElementById(\"id1\").parentNode
document.getElementById(\"div1\").removeChild(document.getElementById(\"id1\"));
}
</script>
<body>
<input type = \"button\" onclick = \"test()\" value = \"动态的创建一个超链接\"/>
<input type = \"button\" onclick = \"test2()\" value = \"动态的删除添加的元素\"/>
<div id = \"div1\" style = \"width:200px;height:300px;border:1px solid red\">
div1
</div>
</body>
</html>

本文地址:https://www.stayed.cn/item/2441

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。