DOM 操作を使用して簡単なメッセージボードを実装する js メソッド

ホームページ

ウェブフロントエンド

jsチュートリアル

DOM 操作を使用して簡単なメッセージボードを実装する js メソッド_javascript スキル

May 16, 2016 pm 04:04 PM

dom js 伝言板

この記事の例では、js が DOM 操作を使用して簡単なメッセージボードを実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

写真の簡易掲示板は、端的に言えばDOM操作の練習用です。

ポイント 1: document.createElement("タグ名") は新しい要素を作成します

ポイント 2: 親の element.appendChild("Element") ページのタグ (最後のタグに表示される) に新しい要素を挿入し、ブラウザに表示されるようにします

ポイント3: 親要素.insertBefore("要素","どの要素の前に挿入するか") 新規作成した要素をページ上の指定タグの前に挿入し、後から入力した内容が前面に表示されるようにする

ポイント 4: 親 element.removeChild("Element") は指定された要素を削除します

以下のコード:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;script&gt;
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 + " &lt;span&gt;删除&lt;/span&gt;";
  var oli1 = oUl.getElementsByTagName("li");
  if(oli1.length&gt;0){
   oUl.insertBefore(oli,oli1[0]);
  }else{
   oUl.appendChild(oli);
  }
  oMsg.value='';
   var oSpan = document.getElementsByTagName("span");
   for(var i=0; i&lt;oSpan.length; i++){
    oSpan[i].onclick = function(){
     oUl.removeChild(this.parentNode);
    }
   }
 }
} 
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;简易留言板&lt;/h1&gt;
&lt;input id="msg" type="text" size="40" value=""&gt;
&lt;input id="btn" type="button" value="留言"&gt;
&lt;div id="msg_c"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。