动态添加元素例子

来源:互联网 发布:供应链金融 知乎 编辑:程序博客网 时间:2024/05/19 08:37
 

<html>
<head>
<body>
<script>

function show() {

var spObj = document.getElementById("mail");
spObj.innerHTML='<input type="text" />';
}
function cls(ob){
  ob.parentNode.parentNode.removeChild(ob.parentNode);
}

function creatDiv(){
var o=document.createElement("span");
o.innerHTML="<div id='div'>sdfsdf</div>";
document.getElementById("box").appendChild(o);
}
function removeDiv(){
var box = document.getElementById("div");
box.parentNode.removeChild(box);
//box.removeChild(document.getElementById("div"));
//document.getElementById("div").removeNode();
}
</script>

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
<div id="test">
sssss
<p>ddddddddd</p>
</div>

<span id="mail">
sdfsdfsddsf
</span>

<p><input type="button" value="ONCLICK" onclick="show()"/></p>

<div style="float:left;border:1px solid blue" id="box" >
wdfafddfsdfsdfsdf
sdfsdf
sdfsfdsdf
sdfsdf
</div>

<input type="button" value="我加" onclick='creatDiv()'>
<input type="button" value="我删" onclick='removeDiv()'>
</body>
</head>
</html>

原创粉丝点击