appendChild()方法是向节点添加最后一个子节点。也可以使用此方法从一个元素向另一个元素移动元素。

案例一：向节点添加最后一个子节点

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <ul id="mylist">

            <li>牛奶</li>

            <li>橡胶</li>

            <li>花生</li>

        </ul>

        <input type="text" id="listname" name="listname"/>

        <input type="button" value="添加列表项" onclick="mylist();"/>

         <script type="text/javascript">

            function mylist(){

                var node=document.createElement("li"); //创建一个li节点

                var testnode=document.getElementById("listname").value;//拿到input输入框的值

                var asd=document.createTextNode(testnode)//定义创建文本节点

                node.appendChild(asd); //把文本节点追加到li节点

                document.getElementById("mylist").appendChild(node);//把li节点添加到ul中

            }

            </script>

    </body>

</html>

案例二：从一个元素向另一个元素移动

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <ul id="mylist1">

            <li>牛奶</li>

            <li>橡胶</li>

            <li>花生</li>

        </ul>

        <ul id="mylist2">

            <li>苹果</li>

            <li>梨子</li>

            <li>草莓</li>

        </ul>

        <input type="button" value="点击移动" onclick="mylist();"/>

        <script type="text/javascript">

            function mylist(){

                //定义节点 并把mylist2中的第一子节点赋值给node

                var node=document.getElementById("mylist2").firstChild;

                //将node里面获取的子节点 添加到mylisf1里面

                document.getElementById("mylist1").appendChild(node);

            }

        </script>

    </body>

</html>

JavaScript中的appendChild（）方法的更多相关文章

  1. javascript中的splice方法介绍&示例

    javascript 中的 splice 方法很强大,它可以用于插入.删除或替换数组的元素. 下面来一一介绍! 删除:用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数 ...

  2. javascript中的toString()方法

    javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘 ...

  3. JavaScript中的工厂方法、构造函数与class

    JavaScript中的工厂方法.构造函数与class 本文转载自:众成翻译 译者:谢于中 链接:http://www.zcfy.cc/article/1129 原文:https://medium.c ...

  4. javascript中的删除方法

    可能呢再开发的过程中呢使用的不是很多,但是碰上呢可以注意下 1.比如: var x = 10; delete x; console.log(x); 结果是多少,是10,不是异常也不是undefined ...

  5. javascript中document.appendChild和document.body.appendChild的问题

    在IE7中 var conentDiv = document.createElement("div"); document .body .appendChild(conentDiv ...

  6. JavaScript中样式，方法 函数的应用

    JavaScript中一个字母都不能错,编写的时候他不报错,也不提示,只有在执行的时候才会提示错误位置 . 一.样式 .waring {background-color:yellow } .highl ...

  7. javascript中的sort()方法

    现在在学习javascript中,发现sort()函数是有点奇怪的东西(可能是本人水平的问题-_-!),于是就在这里记录一下自己找到的东西吧.sort()这个方法的参数很奇怪,必须是函数,但也是可选参 ...

  8. Java和JavaScript中使用Json方法大全

    林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka   摘要:JSON(JavaScript Object Notation) 是一种轻量级的数 ...

  9. javascript中的继承方法

    从Javascript面向对象编程(二):构造函数的继承这里,可以看到详细的说明. 我只是将其中的例子做成html文件,便于调试罢了. 1. 构造函数绑定 <html> <head& ...

随机推荐

  1. mp4 格式无法使用html5的video标签播放

     只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;

  2. 接口自动化测试框架 ：APIAutoTest框架

    前言 随着测试技术的发展,接口自动化测试逐渐成为各大公司投入产出比最高的测试技术.介入时间早,执行效率高,稳定性高的优点,让越来越多的公司引入接口自动化测试. 框架简介 APIAutoTest是处理A ...

  3. FormsAuthentication实现登录(转)

    配置项描述: <authentication mode="Forms"> <forms name=".ASPXAUTH" loginUrl=& ...

  4. kafka java API的使用

    Kafka包含四种核心的API: 1.Producer API支持应用将数据流发送到Kafka集群的主题 2.Consumer API支持应用从Kafka集群的主题中读取数据流 3.Streams A ...

  5. Js正则Replace方法

    JS正则的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\s+)|(\s+$)" ...

  6. oracle 中关于null的操作

    空值 空值一般用NULL表示 一般表示未知的.不确定的值,也不是空格 一般运算符与其进行运算时,都会为空 空不与任何值相等 表示某个列为空用:IS NULL  不能使用COMM＝NULL这种形式 某个 ...

  7. PyCharm+cmd中使用Anaconda 与 新建Python环境（Windows）

    PyCharm配置Anaconda Anaconda的安装在网上已经有了,这里主要讲之前已经安装了已经配置好Python环境变量以及PyCharm的情况下,使用Anaconda. 即在PyCharm中 ...

  8. An internal error occurred during: "Initializing Java Tooling". Eclipse启动发生的错误

    An internal error occurred during: “Initializing Java Tooling” 错误经常是莫名其妙的出现这种总错误,解决办法: 1.eclipse -&g ...

  9. 【随笔】设置title标题图标为自定义图片

    第一步: 利用图标工具(有很多)制作图标文件(favicon.ico)上传到网站所在的服务器的根目录下,这个文件必须是16*16大小的图标文件. 第二步: 在<head></head ...

  10. jsoup、xpath教程

    一.jsoup 1.使用JSOUP处理HTML文档 2.使用 jsoup 对 HTML 文档进行解析和操作 3.jsoup开发指南,jsoup中文使用手册,jsoup中文文档 二.xpath 1.XP ...