<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

window.onload = function() {

    var oText = document.getElementById('text1');

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

    var oUl = document.getElementById('ul1');

    oBtn.onclick = function() {

        //创建li元素

        var oLi = document.createElement('li');//document.createElement(标签名称); 创建元素

        oLi.innerHTML = oText.value;

        //创建a 删除元素

        var oA = document.createElement('a');

        oA.innerHTML = '删除';

        oA.href = 'javascript:;';

        //删除事件

        oA.onclick = function() {

            oUl.removeChild( this.parentNode );//父级.removeChild(要删除的元素); 要删除元素的父级 this表示当前

        }

        oLi.appendChild( oA );

        /*

            父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素

            在ie下如果第二个参数的节点不存在，会报错

            在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加

            oUl.insertBefore( oLi, oUl.children[0] );

        */

        if ( oUl.children[0] ) {

            oUl.insertBefore( oLi, oUl.children[0] );

        } else {

            oUl.appendChild( oLi );//父级.appendChild(要添加的元素) 方法 追加子元素 oUl.appendChild( oLi );

        }

    }

}

</script>

</head>

<body>

    <input type="text" id="text1" /><input type="button" value="留言" id="btn" />

    <ul id="ul1"></ul>

</body>

</html>

创建删除元素appendChild,removeChild,createElement,insertBefore的更多相关文章

  1. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  2. js,javascript,删除元素,创建元素,插入子元素

    删除元素示例代码 <html> <head> </head> <body> <div> <div id="delId&quo ...

  3. DOM 创建元素 删除元素（结点）

    创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...

  4. javascript数组操作(创建、元素删除、数组的拷贝)

    这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...

  5. JavaScript HTML DOM---遗漏知识再整理（向html添加/删除元素，改变内容和css）

    1.  HTML DOM 改变 HTML 内容:(HTML DOM 允许 JavaScript 改变 HTML 元素的内容.) (1)改变 HTML 输出流 在 JavaScript 中,docume ...

  6. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  7. 动态创建dom元素

    效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...

  8. 原生js动态添加新元素、删除元素方法

    1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. js 动态添加元素 删除元素逻辑

    js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...

随机推荐

  1. DIV伸缩盒子box

    <div class="div1"> <div class="box"> <div>A</div> <di ...

  2. user-select

    样式详查    http://www.css88.com/book/css/properties/user-interface/user-select.htm 1, user-select: none ...

  3. 用js 向h5 中的table 动态添加数据 （简单实现）

    //向 表格传值 function setTextareaValue(items,pp){ console.log(" 进入函数 items=="+items); var tb = ...

  4. Uva442 hdu 1082 Matrix Chain Multiplication

    要注意取出来的时候 先取出q的是后面那个矩阵 后取出p的是前面的矩阵 所以是判断 p.a == q.b #include <iostream> #include <stack> ...

  5. 程序员必备的代码审查（Code Review）清单【转载】

    在我们关于高效代码审查的博文中,我们建议使用一个检查清单.在代码审查中,检查清单是一个非常好的工具——它们保证了审查可以在你的团队中始终如一的进行.它们也是一种保证常见问题能够被发现并被解决的便利方式 ...

  6. spring 架构学习

    学习目的用于抽象业务逻辑,因spring本身就是抽象业务逻辑的框架,如做业务架构网面的工作 spring为不二之选. 一些好的网址 http://www.ibm.com/developerworks/ ...

  7. Docker使用-v挂载主机目录到容器后出现Permission denied

    1. 在挂载主机目录的到容器后,操作挂载的目录出现权限问题: # 将主机上的/data/share/master目录挂载到容器的/opt/share目录docker run -it --name=ma ...

  8. linux TCP Wrappers

    1. TCP Wrapper简介 (出处:http://www.softpanorama.org/Net/Network_security/TCP_wrappers/) (维基百科)TCP Wrapp ...

  9. 关于UIView的userInteractionEnabled属性

    关于UIView的userInteractionEnabled属性 如果父视图为ParentView包含一个Button,如果再ParentView上添加子视图ChildView,且ChildView ...

  10. Collections.sort的三种用法

    /** * @author guwh * @version 创建时间:2011-11-3 上午10:49:36 * 类说明 */ package com.jabberchina.test; impor ...