<!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. hdu 4597 + uva 10891(一类区间dp)

    题目链接:http://vjudge.net/problem/viewProblem.action?id=19461 思路:一类经典的博弈类区间dp,我们令dp[l][r]表示玩家A从区间[l, r] ...

  2. HDU 3911 Black And White（线段树区间合并+lazy操作）

    开始以为是水题,结果...... 给你一些只有两种颜色的石头,0为白色,1为黑色. 然后两个操作: 1 l r 将[ l , r ]内的颜色取反 0 l r 计算[ l , r ]内最长连续黑色石头的 ...

  3. （转）qsort和sort

    1.qsort函数: 原 型: void qsort(void *base, int nelem, int width, int (*fcmp)(const void *,const void *)) ...

  4. js正则表达式练习

    匹配完整的名字 function process_name() { var field = document.getElementById("name_field"); var n ...

  5. 使用maven 如何生成源代码的jar包

    http://hw1287789687.iteye.com/blog/1943157

  6. ccc 单点触控

    cc.Class({ extends: cc.Component, properties: { }, // use this for initialization onLoad: function ( ...

  7. 【BZOJ3450】Tyvj1952 Easy 期望DP

    [BZOJ3450]Tyvj1952 Easy Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是 ...

  8. 【转】推荐UML插件AmaterasUML

    基于Green UML在使用过程中的问题(对于大工程,点击生成类图后不响应),自己只能再次寻找其他的插件.在无意中,发现AmaterasUML. 官方网站:http://amateras.source ...

  9. 推荐两款PC健康小软件

    一.前言 对于经常需要坐在电脑前工作一整天的人来说,健康问题是不得不关注的.下面推荐我一直在用的两款体积非常小(几百KB)的健康小软件,也许可以在无形中保护你.提醒你. 1. FadeTop 这是一款 ...

  10. gson 简要使用

    http://www.cnblogs.com/chenlhuaf/archive/2011/05/01/gson_test.html 发现了google的gson,因为之前对于protocolbuf有 ...