<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js练习</title>
<style type="text/css">
#ull{
padding:0px;
margin: 0px;
}
#ull li{
list-style:none;
background-color: #ccc;
width:auto;
border:1px solid #999;
position:relative;
}
#ull li h2{
display:inline-block;
}
#ull li p{
display:inline-block;
}
#ull li a{
position:absolute;
text-decoration: none;
color:red;
right:5px;
bottom:5px;
}
#content{
width:300px;
height:100px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oname = document.getElementById(‘name‘);
var ocontent = document.getElementById(‘content‘);
var oul = document.getElementById(‘ull‘);
var obtn = document.getElementById(‘btn‘);
var lli = oul.getElementsByTagName(‘li‘);
obtn.onclick = function(){
oli = document.createElement(‘li‘);
oh2 = document.createElement(‘h2‘);
op = document.createElement(‘p‘);
oa = document.createElement(‘a‘);
oa.innerHTML="删除";
oa.href = "javascript:;";
oa.onclick = function(){
oul.removeChild(this.parentNode);
}
oh2.innerHTML = oname.value + ‘：‘;
op.innerHTML = ocontent.value;
oli.appendChild(oh2);
oli.appendChild(op);
oli.appendChild(oa);
if(lli.length > 0){
oul.insertBefore(oli,lli[0]);
}
else{
oul.appendChild(oli);
}
}
}
</script>
</head>
<body>
姓名：<input type="text" id="name"><br>
留言：<textarea cols="20" rows="3" wrap = "hard" id="content"></textarea><br>
<button id="btn">添加</button>
<ul id="ull">
</ul>
</body>
</html>
这是一个利用DOM制作的一个简易留言板
时间： 2024-08-08 22:04:24