DOM操作----动态创建网页新元素
2018-11-05 本文已影响0人
萌酷萌酷的兔
<!DOCTYPE html>
<html>
<head>
<title>动态创建网页新元素</title>
<script type="text/javascript">
function newObj(){
var box1=document.getElementById('box1');
box1.innerHTML="<span>呵，女人！</span>"
var box2=document.getElementById('box2');
var span1=document.createElement('span');
var span2=document.createElement('span');
span1.innerHTML="呵，男人！";
span2.appendChild(document.createTextNode("呵，死人妖！"));
box2.appendChild(span1);
box3.appendChild(span2);
}
var count=0;
function beng(){
count++;
var monkey=document.createElement('h1');
var str="哟！大猴呀~"+count;
monkey.innerHTML=str;
document.getElementById('box4').appendChild(monkey);
}
</script>
</head>
<body>
<input type="button" value="女娲造人" onclick="newObj()">
<input type="button" value="石头蹦！" onclick="beng()">
<p id="box1"></p>
<p id="box2"></p>
<p id="box3"></p>
<p id="box4"></p>
</body>
</html>
