js使用DOM操作實(shí)現(xiàn)簡(jiǎn)單留言板的方法

更新時(shí)間：2015年04月10日 11:15:25 作者：jingangel

這篇文章主要介紹了js使用DOM操作實(shí)現(xiàn)簡(jiǎn)單留言板的方法,涉及javascript中DOM操作的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js使用DOM操作實(shí)現(xiàn)簡(jiǎn)單留言板的方法。分享給大家供大家參考。具體分析如下：

如圖所示簡(jiǎn)易留言板，也就是自?shī)首詷?lè)版，說(shuō)白了就是練習(xí)DOM操作。

要點(diǎn)一：document.createElement("標(biāo)簽名") 新建元素

要點(diǎn)二：父元素.appendChild("元素") 把新建的元素插入到頁(yè)面的標(biāo)簽中（在標(biāo)簽的最后一個(gè)顯示），這樣才會(huì)在瀏覽器中顯示出來(lái)

要點(diǎn)三：父元素.insertBefore("元素","要插入哪個(gè)元素的前面") 把新建的元素插入到頁(yè)面中指定的標(biāo)簽前面，這樣后面輸入的內(nèi)容才會(huì)顯示到前面

要點(diǎn)四：父元素.removeChild("元素") 刪除指定元素

下面，上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</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='';
   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>簡(jiǎn)易留言板</h1>
<input id="msg" type="text" size="40" value="">
<input id="btn" type="button" value="留言">
<div id="msg_c"></div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

前端實(shí)現(xiàn)批量下載并打包成ZIP文件的步驟及示例
下載我相信很多小伙伴并不陌生,下載文件的形式也有很多,下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)批量下載并打包成ZIP文件的步驟及示例,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
JS彈出窗口的運(yùn)用與技巧大全
本篇文章主要介紹了JS彈出窗口的運(yùn)用與技巧大全,詳解介紹了幾種利用網(wǎng)頁(yè)彈出各種形式的窗口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2016-11-11
JavaScript判斷數(shù)組重復(fù)內(nèi)容的兩種方法(推薦)
本文給大家介紹兩種JavaScript判斷數(shù)組重復(fù)內(nèi)容的方法(推薦)非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-06-06
函數(shù)式編程入門實(shí)踐（一）
這篇文章主要介紹了Javascript函數(shù)式編程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
基于layPage插件實(shí)現(xiàn)兩種分頁(yè)方式淺析
這篇文章主要為大家詳細(xì)介紹了基于layPage插件實(shí)現(xiàn)兩種分頁(yè)方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
基于Three.js插件制作360度全景圖
這篇文章主要介紹了基于Three.js插件制作的360度全景圖,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
基于input框覆蓋掉數(shù)字英文的實(shí)例講解
下面小編就為大家?guī)?lái)一篇基于input框覆蓋掉數(shù)字英文的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
詳解JavaScript中的Map和WeakMap
Map和WeakMap都是ES6中新增的數(shù)據(jù)結(jié)構(gòu),它們的主要區(qū)別在于鍵的作用域和鍵的類型,本文就通過(guò)代碼示例給大家詳細(xì)介紹了JavaScript鍵的作用域和類型,需要的朋友可以參考下
2023-08-08
js與css的阻塞問(wèn)題詳析
JS具有阻塞特性,當(dāng)瀏覽器在執(zhí)行js代碼時(shí),不能同時(shí)做其它事情,下面這篇文章主要給大家介紹了關(guān)于js與css阻塞問(wèn)題的相關(guān)資料,需要的朋友可以參考下
2021-07-07
webpack里使用jquery.mCustomScrollbar插件的方法
malihu-custom-scrollbar-plugin是一個(gè)依賴jquery的自定義網(wǎng)頁(yè)滾動(dòng)條樣式插件，這篇文章主要介紹了webpack里使用jquery.mCustomScrollbar插件的方法，感興趣的小伙伴們可以參考一下
2018-05-05