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. L1-1 天梯赛座位分配

    天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i 所学校有 M[i] 支队伍,每队 10 位 ...

  2. Q767 重构字符串

    给定一个字符串S,检查是否能重新排布其中的字母,使得两相邻的字符不同. 若可行,输出任意可行的结果.若不可行,返回空字符串. 示例 1: 输入: S = "aab" 输出: &qu ...

  3. ABP相关网站

    ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate 系列文章 ...

  4. python四则运算2.0

    github项目地址: https://github.com/kongkalong/python PSP 预估耗时(分钟) Planning .Estimate 48*60 Development . ...

  5. Java Web基础——Controller+Service +Dao三层的功能划分

    转自:https://www.cnblogs.com/cielosun/articles/5752272.html 1. Controller/Service/DAO简介: Controller是管理 ...

  6. php 图片上传 并返回上传文件位置 支持多文件上传

    <?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...

  7. maven——添加插件和添加依赖有什么区别？

    依赖:运行时开发时都需要用到的jar包,比如项目中需要一个Json的jar包,就要添加一个依赖,这个依赖在项目运行时也需要,因此在项目打包时需要把这些依赖也打包进项目里: 插件:在项目开的发时需要,但 ...

  8. centos 7编译安装nginx

    一.安装nginx时必须先安装相应的编译工具yum -y install gcc gcc-c++ autoconf automakeyum -y install zlib zlib-devel ope ...

  9. Monkey入门之如何在android虚拟机中安装apk包

    如果想把公司的产品apk包安装到android虚拟机中,应该进行如下操作: 1.首先将apk包放到C:\Program Files\Android\android-sdk\platform-tools ...

  10. Python基础(9) - 类

    Python 看下面一个简单类: >>> class MyClass(object): ... """ ... this is a class with ...