本文阐述了js利用DOM操作实现简单留言板的方法。分享给大家参考。具体分析如下：

如图，简单的留言板，也就是自娱版，就是练习DOM操作。

要点1: document.createElement('标记名')创建一个新元素

要点2:父元素。appendChild ('element ')将新创建的元素插入到页面的标签中(显示在最后一个标签上)，以便在浏览器中显示

要点3:父元素。insertBefore ('element '，'在哪个元素之前插入')将新创建的元素插入到页面上指定标签的前面，这样以后输入的内容就会显示在前面

要点4:父元素。removeChild('元素')删除指定的元素

下面，代码：

！doctype html townleta charset=' utf-8 '/title无标题文档/title script window . onload=function(){ varomsg=document . getelementbyid(' msg ')；var oBtn=document . getelementbyid(' BTN ')；var oMsg _ c=document . getelementbyid(' msg _ c ')；var OUl=document . create element(' ul ')；oMsg _ c . appendchild(OUl)；obtn . onclick=function(){ var SVal=OMSg . value；var oli=document . create element(' Li ')；oli . innerhtml=sval ' span delete/span '；var oli 1=OUl . getelementsbytagname(' Li ')；if(oli 1 . length 0){ OUl . insert before(oli，oli 1[0])；} else { OUl . appendchild(oli)；} oMsg.value=var oSpan=document . getelementsbytagname(' span ')；for(var I=0；ioSpan.lengthi ){ oSpan[i]。onclick=function(){ OUl . remove child(this . parent node)；} } } }/script/headsdyh1简单留言板/h1 input tid=' msg ' type=' text ' size=' 40 ' value=' input tid=' BTN ' type=' button ' value='留言' div id='msg_c'/div/body/html希望这篇文章