Heim > Web-Frontend > js-Tutorial > js-Methode zum Implementieren eines einfachen Message Boards mithilfe von DOM-Operationen

js-Methode zum Implementieren eines einfachen Message Boards mithilfe von DOM-Operationen

高洛峰
Freigeben: 2017-02-06 09:41:07
Original
1740 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie js DOM-Operationen verwendet, um ein einfaches Message Board zu implementieren. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Das im Bild gezeigte einfache Message Board ist eine Selbstunterhaltungsversion. Um es ganz klar auszudrücken: Es dient zum Üben von DOM-Operationen.

js-Methode zum Implementieren eines einfachen Message Boards mithilfe von DOM-Operationen

Punkt 1: document.createElement("label name") Neues Element

Punkt 2: Parent element.appendChild("Element") Das Element ist in das Tag der Seite eingefügt (wird beim letzten Tag angezeigt), sodass es im Browser angezeigt wird

Punkt 3: Parent element.insertBefore("Element","Vor welchem ​​Element eingefügt werden soll") Fügen Sie das neu erstellte Element vor dem angegebenen Tag auf der Seite ein, damit der später eingegebene Inhalt vorne angezeigt wird

Punkt 4: Parent element.removeChild("Element") Das angegebene Element löschen

Unten der Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
 var oMsg = document.getElementById("msg");
 var oBtn = document.getElementById("btn");
 var oMsg_c = document.getElementById("msg_c");
 var oUl = document.createElement("ul");
 oMsg_c.appendChild(oUl);
 oBtn.onclick = function(){
  var sVal = oMsg.value;
  var oli = document.createElement("li");
  oli.innerHTML = sVal + " <span>删除</span>";
  var oli1 = oUl.getElementsByTagName("li");
  if(oli1.length>0){
   oUl.insertBefore(oli,oli1[0]);
  }else{
   oUl.appendChild(oli);
  }
  oMsg.value=&#39;&#39;;
   var oSpan = document.getElementsByTagName("span");
   for(var i=0; i<oSpan.length; i++){
    oSpan[i].onclick = function(){
     oUl.removeChild(this.parentNode);
    }
   }
 }
} 
</script>
</head>
<body>
<h1>简易留言板</h1>
<input id="msg" type="text" size="40" value="">
<input id="btn" type="button" value="留言">
<div id="msg_c"></div>
</body>
</html>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Weitere js-Methoden zur Implementierung einfacher Message Boards mithilfe von DOM-Operationen finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage