<!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. JDBC之——一个单线程JDBC基类和一些注意事项

    下面的一个DBase基类提供了一些jdbc的基本操作,配置文件的配置部分并不准确,只是在自己机器上的mysql中测试过.. 数据库的增删改方法中都在开始调用了getConnection方法,末尾调用了 ...

  2. jQuery基础知识点（DOM操作）

    1.样式属性操作     1)设置样式属性操作         ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...

  3. cocos2dx游戏开发——微信打飞机学习笔记（三）——WelcomeScene的搭建

    一.场景与层的关系: cocos2dx的框架可以说主要由导演,场景,层,精灵来构成: 1.其中导演,意如其名,就是操控整个游戏的一个单例,管理着整个游戏. 2.场景就像电影的一幕剧情,所以说,懂得如何 ...

  4. popupwindow点击空白处如何自动消失？

    Popupwindow如果需要点击空白处自动消失,需要设置两个函数 1.customPopWindow.setFocusable(true);该函数也可以在构造函数中设置,如:mPopupWindow ...

  5. JAVA Day6

    1.对象:用来描述客观事物的一个实体,由一组属性和方法组成 2.属性--对象具有的各种特征    *每个对象的每个属性都拥有特定值    *例如:张浩和李明的年龄.姓名不一样 3.方法--对象执行的操 ...

  6. java 大数计算

    这几天做了几道用大数的题,发现java来做大数运算十分方便.对acmer来说是十分实用的 1.valueOf(parament); 将参数转换为制定的类型 比如 int a=3; BigInteger ...

  7. Liferay 6.2 改造系列之十二：修改Portal设置页面表单内容

    将Portal设置页面中无用的内容删除: 在/portal-master/portal-impl/src/portal.properties文件中,有如下配置: # # Input a list of ...

  8. BFS(判断状态) HDOJ 3533 Escape

    题目传送门 题意:一个人从(0, 0)逃往(n, m),地图上有朝某个方向开炮的炮台,问最少逃脱步数 分析:主要在状态是否OK,当t时刻走到(x,y),炮台是否刚好打中,因为只能是整数,所以用整除判断 ...

  9. 锐捷 Linux登录命令

    cd /home/ficow/桌面/rjsupplicant&&sudo chmod +x ./rjsupplicant.sh&&sudo chmod +x ./rjs ...

  10. Oracle 查询性能优化实践

      1.索引使用原则   不要对索引使用全模糊,但是 LIKE 'asdf%'是可以的,即不要Contains,可用StartWith 不要对索引进行函数,表达式操作,或者使用is null判断,否则 ...