<!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. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  2. loadrunner比较有用的字符串函数

    loadrunner比较有用的字符串函数 ******************************************************************************* ...

  3. Android学习系列(42)--Android Studio实战技巧

    使用android studio开发项目的一些问题,功能和技巧. 1. 环境 Mac OSX 10.9.5 + Android Studio 0.8.9 2. gradle项目加载超慢 这是因为gra ...

  4. 解决Genymotion无法创建新设备或无法显示设备列表问题

    准备工作: 链接: https://pan.baidu.com/s/1i5v4IBN 密码: jc3m 用2.8的和最新VirtualBox-5.1.10-112026-Win 注意事项: 1.笔记本 ...

  5. [bzoj4514]数字配对[费用流]

    今年SDOI的题,看到他们在做,看到过了一百多个人,然后就被虐惨啦... 果然考试的时候还是打不了高端算法,调了...几天 默默地yy了一个费用流构图: 源连所有点,配对的点连啊,所有点连汇... 后 ...

  6. Java 生成16/32位 MD5

    http://blog.csdn.net/codeeer/article/details/30044831

  7. jQuery入门第一天

    使用jQuery之前,我们需要加一些代码到HTML文件中. 首先在页面顶端增加一行script元素,然后写上结束符. 浏览器会运行script 里所有的Javascript,包括jQuery. 在你的 ...

  8. ural 2070. Interesting Numbers

    2070. Interesting Numbers Time limit: 2.0 secondMemory limit: 64 MB Nikolay and Asya investigate int ...

  9. iOS之04-方法的声明和实现

    本次重点学习和理解OC对象方法的声明和定义 代码: /* 计算器类 方法: 1> 返回 π 2> 计算某个整数的平方 3> 计算两个整数的和 */ #import <Found ...

  10. node.js 调用天气webservice接口

    首先安装soap模块 npm install soap 1 2 3 4 5 6 7 8 9 10   var soap = require('soap');   var url = 'http://w ...