<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>JS Practice</title> <styletype= "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> <Scripttype= "Text/javascript">window.onload= function() { varOname=document.getElementById ('name'); varocontent=document.getElementById ('content'); varOul=document.getElementById ('ull'); varobtn=document.getElementById ('btn'); varLli=Oul.getelementsbytagname ('Li'); Obtn.onclick= function() {Oli=Document.createelement ('Li'); OH2=Document.createelement ('H2'); Op=Document.createelement ('P'); OA=Document.createelement ('a'); Oa.innerhtml="Delete"; 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>Name:<inputtype= "text"ID= "Name"><BR>message:<textareacols= " the"rows= "3"Wrap= "hard"ID= "Content"></textarea><BR><ButtonID= "BTN">Add to</Button><ulID= "Ull"></ul></Body></HTML>
This is a simple message board made using DOM.
javascript-Simple Message Board making