suchen

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

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

高洛峰
高洛峰Original
2017-02-06 09:41:071708Durchsuche

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>

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!

Stellungnahme：
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
Vorheriger Artikel：So konvertieren Sie eine HTML-Zeichenfolge in ein JQuery-Dom-Objekt in JavascriptNächster Artikel：So konvertieren Sie eine HTML-Zeichenfolge in ein JQuery-Dom-Objekt in Javascript

In Verbindung stehende Artikel

Mehr sehen