<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>js练习</title>

    <style type="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>

    <script type="text/javascript">

    window.onload = function() {

        var oname = document.getElementById('name');

        var ocontent = document.getElementById('content');

        var oul = document.getElementById('ull');

        var obtn = document.getElementById('btn');

        var lli = oul.getElementsByTagName('li');

        obtn.onclick = function(){

        oli = document.createElement('li');

        oh2 = document.createElement('h2');

        op  = document.createElement('p');

        oa  = document.createElement('a');

         oa.innerHTML="删除";

        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>

姓名：<input type="text" id="name"><br>

留言：<textarea cols="20" rows="3" wrap = "hard" id="content"></textarea><br>

<button id="btn">添加</button>

<ul id="ull">

</ul>

</body>

</html>

这是一个利用DOM制作的一个简易留言板

javascript-DOM操作-留言板制作的更多相关文章

  1. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  2. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  3. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. html的留言板制作（js）

    这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...

  6. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  7. javaScript简单的留言板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  9. JavaScript+IndexedDB实现留言板：客户端存储数据

    之前看到贴友有问:用js怎么实现留言板效果.当时也写了一个,但是没有实现数据存储:http://www.ido321.com/591.html 现在将之前的改写一下,原来的HTML布局不变,为了防止G ...

随机推荐

  1. Qt Creator 如何支持并行？

    PRO 文件中加入以下语句即可 #OpenMP QMAKE_CXXFLAGS += -openmp QMAKE_LFLAGS += -openmp

  2. 处理 Java 的“Cannot allocate memory”错误

    今天在配置 DCA 服务器的时候,检验 java 版本的时候忽然遇到了一个 Cannot allocate memory 错误 [root@elcid-prod1 ~]# java -version ...

  3. mac开发环境爬坑记（搭建php+nginx+mysql+redis+laravel+git+phpstorm）

    题外话:前几天,终于以原价一半的价格,将我那台15版mbp在bbs上卖了出去.之所以用了“终于”这个词儿,是我一直迟迟没有下定决心卖掉它,可眼瞅着再不卖掉,又要掉价,况且我的新电脑,也终于下来了. 话 ...

  4. Python3.6全栈开发实例[004]

    4.计算传入函数的字符串中, 数字.字母.空格以及其他内容的个数,并返回结果. s1 = 'wan%$#(gwdwq\nwdhuaiww3 w02041718' def func1(s1): dic ...

  5. 【转】Python的hasattr() getattr() setattr() 函数使用方法详解

    Python的hasattr() getattr() setattr() 函数使用方法详解 hasattr(object, name)判断一个对象里面是否有name属性或者name方法,返回BOOL值 ...

  6. ACM训练小结-2018年6月14日

    于恢复性训练Day2情况如下:https://vjudge.net/contest/234651    先看A题,读懂题意,没有想明白,码完后连续多次WA,后找到错误AC.    对B题,发现其是一个 ...

  7. PHP字符串函数大全

    无论哪种编程语言,字符串操作都是一个重要的基础,往往简单而重要.PHP为我们提供了大量的字符串操作函数,功能强大,使用也比较简单.在这里结合实例总结分析PHP字符串函数的功能. 1.addcslash ...

  8. python补充知识点

    1. 在python2中用xrange,在python3中直接使用range就好了 2. 常数 None在逻辑判断的时候指代False,其他方式不代表True或者False 3. for循环只作用域容 ...

  9. debian内核代码执行流程(三）

    接续<debian内核代码执行流程(二)>未完成部分 下面这行输出信息是启动udevd进程产生的输出信息: [ ]: starting version 175是udevd的版本号. 根据& ...

  10. INSPIRED启示录 读书笔记 - 第17章 产品人物角色

    理解目标用户 人物角色又称为用户特征记录(user profile),是指通过与用户沟通交流,确定典型的目标用户类型,在理解各类目标用户的特征的基础上建立的人物原型 为了发掘潜在的人物角色,产品经理必 ...