使用appendChild（）和createElement（）方法实现留言板

来源：互联网发布：阿里云备案转入编辑：程序博客网时间：2024/05/20 06:23

<!doctype html>

<html>
<head>
<style>
#section1{
width:480px;
height:260px;
border:1px solid;
}
#liu{
width:480px;
}
.ti{
font-size:15px;
font-style:bold;
width:476px;
}
.con{
font-size:10px;
width:476px;
}
.zz{
border:1px solid;
}
</style>
<script>
function add(){
var ti = document.getElementById("tit");
var con = document.getElementById("in");
if(ti.value==""||con.value==""){
return;
}
var liu = document.getElementById("liu");
var p1=document.createElement("P");//新建一个P元素
var p2=document.createElement("P");
var p4=document.createElement("P");
var p3=document.createElement("SECTION");//新建一个section元素
p3.className="zz";//设置元素的class属性
p1.innerHTML= ti.value;//设置p元素的显示内容
p1.className="ti";
p2.innerHTML="&nbsp&nbsp&nbsp&nbsp"+con.value;
p2.className="con";
p3.appendChild(p1);//添加节点，将新建的节点添加到已有的节点中就可在网页上显示出来
p3.appendChild(p2);
liu.appendChild(p3);
liu.appendChild(p4);
ti.value="";
con.value="";
}
function del(){
var ti = document.getElementById("tit");
var con = document.getElementById("in");
ti.value="";
con.value="";
}
</script>
<meta charset="UTF-8">
</head>
<body>
<h2 id="ti">留言板</h2>
<div id="liu">

</div>
<section id="section1">
<br>
<span>留言标题：</span><input type="text" id="tit"><br><br>
留言内容：<textarea id="in" placeholder="请留言" cols="50" rows="10"></textarea>
<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button onclick="add()">提交</button>&nbsp&nbsp<button onclick="del()">清除</button>
</section>
</body>
</html>

阅读全文

0 0