<!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. 保利威视Polyv点播集成

    demo和文档下载地址http://dev.polyv.net/2014/08/sdk/ 1.demo是eclipse的,所以导入android studio有几个要注意的地方 导入方式 在app的b ...

  2. 【SQL Sever】SQL Sever数据库重命名

    将SQL数据库重命名,会有两种情况: 1.未使用的数据库 方法:未使用的数据库改名比较方便,找到你要更改的数据库,右键选择[重命名] 然后就可以重新起名字了,重新起名字之后,点击其他的空白处就可以了, ...

  3. JQuery学习之遍历

    1.祖先:向上遍历DOM树 **parent():返回被选中元素的直接父元素,该方法只会向上一级对DOM树进行遍历 $(document).ready(function(){ $("span ...

  4. 对于for的一些认识

    /*▲            ▲▲            ▲▲▲            ▲▲▲▲            ▲▲▲▲▲            ▲▲▲▲▲▲*/例:如图用for嵌套打印一个三 ...

  5. Swift3.0语言教程替换子字符串

    Swift3.0语言教程替换子字符串 Swift3.0语言教程替换子字符串,替换子字符串其实就是将字符串中的子字符串删除,然后再进行添加.为了让这一繁琐的过程变的简单,NSString提供了替换子字符 ...

  6. 锐捷 Linux登录命令

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

  7. Static Resources In ASP.NET Core 1.0

    静态资源包括HTML,CSS,图片和Js文件.在ASP.NET Core 1.0中,静态资源默认的所在目录是wwwroot,wwwroot可以在project.json中定义. Steps: 在www ...

  8. oracle sql别名

    为sql的字段起一个别名,常以为是可有可无的,但是有时候是必要的. 例如在ibatis中 <!-- 获取已发或待发送的彩信记录列表 --> <resultMap id="m ...

  9. Eclipse: Resource is out of sync with the file system when publishing to tomcat server on Eclipse

    Link: http://stackoverflow.com/questions/4343735/avoiding-resource-is-out-of-sync-with-the-filesyste ...

  10. 【BZOJ1864】[Zjoi2006]三色二叉树 树形DP

    1864: [Zjoi2006]三色二叉树 Description Input 仅有一行,不超过500000个字符,表示一个二叉树序列. Output 输出文件也只有一行,包含两个数,依次表示最多和最 ...