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. （二）Audio子系统之new AudioRecord()（Android4.4）

    在上一篇文章<(一)Audio子系统之AudioRecord.getMinBufferSize>中已经介绍了AudioRecord如何获取最小缓冲区大小,接下来,继续分析AudioReco ...

  2. Java操作系统剪贴板（Clipboard）复制粘贴

    Java操作系统剪贴板(Clipboard)复制粘贴

  3. UML-6.1-用例-示例

    1.总览要点:用例.摘要.非正式.详述.测试用例.用例分析与迭代联系起来. 2.示例:Process Sale 1).客户携带所购商品到达收银台. 2).收银员使用pos系统记录每件商品. 操作契约: ...

  4. 网络编程- 解决黏包现象方案二之struct模块（七）

    上面利用struct模块与方案一比较,减少一次发送和接收请求,因为方案一无法知道client端发送内容的长度到底有多长需要和接收OK.多一次请求防止黏包,减少网络延迟

  5. 解决js array的key不为数字时获取长度的问题

    最近写js时碰到了当数组key不为数字时,获取数组的长度为0 的情况. 1.问题场景 var arr = new Array(); arr[‘s1‘] = 1001; console.log(arr. ...

  6. 文件IO（存取.txt文件）

    //存文件方法 public void Save_File_Info(string Save_Path) { //根据路径,创建文件和数据流 FileStream FS = new FileStrea ...

  7. hibernate 自动创建表中文乱码问题

    <property name="connection.url" > <![CDATA[jdbc:mysql:///test?useUnicode=true& ...

  8. 026-log4j配置文件模板

    模板一: ### direct log messages to stdout ### log4j.appender.stdout=org.apache.log4j.ConsoleAppender lo ...

  9. 【转】C#中的委托,匿名方法和Lambda表达式

    简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...

  10. canvas绘制经典星空连线效果

    来自:https://segmentfault.com/a/1190000009675230 下面开始coding:先写个canvas标签 <canvas height="620&qu ...