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. [SCOI2018]游泳池（计算几何＋分数规划＋最大权闭合子图）

    题目链接 https://www.luogu.org/problemnew/show/U56187 注:题面参考了网上的其他博客,并非原题题面,因此数据范围可能有误.数据为原创数据. 题解 其实就是许 ...

  2. rest-framework框架组件

    序列化组件 创建一个序列化类, 视图四种方式 以下代码都需要创建一个serializers.py文件 from rest_framework import serializers from CBV_a ...

  3. （C语言逻辑运算符！）&&两种定义字符串的方法&&局部变量、全局变量&&内部函数、外部函数。（新手基础知识备忘录）

    (一)      四个逻辑运算符:!(逻辑非) ||(或) &&(与) ^ (异或) 位运算:&(与) |(位或) (二)        如何定义字符串: 1,字符串常量   ...

  4. centos 7 下安装nginx-1.15.7

    安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可以安装 Windows 版本,本篇则使用 CentOS 7 作为安装环境. 一. gcc 安装安装 nginx 需要先 ...

  5. Spring Roo 想知道源码，怎么实现自动生成枯燥的有规律的文件

    简介   似乎是社区在维护的,不在 Spring 官网的 main projects 列表里,而是在 社区projects 列表里   是工具,不是像Spring Boot 一样的框架 http:// ...

  6. GPRS的短信和打电话功能

    短信功能: 发短信设置文本格式就可以了:但收短信可能收到的是乱码,需要编写解码程序才可以: 关于打电话单片机复位功能: 首先要建立黑白名单制度过滤手机号,只运行白名单的手机对的单片机打电话:其它的不响 ...

  7. SystemVerilog中枚举类型注意事项

    enum logic {a = 'bx, d = 1'bz}; 在SystemVerilog枚举类型中当使用logic进行声明时,注意logic为四态,所以当使用时如果声明时需要x.z态需要显式声明. ...

  8. 点击劫持（click jacking）

    什么是点击劫持劫持原理劫持案例代码示例优酷频道刷粉的POC腾讯微博刷粉防御 什么是点击劫持 点击劫持,clickjacking,也被称为UI-覆盖攻击.这个词首次出现在2008年,是由互联网安全专家罗 ...

  9. Jmeter创建web测试计划

    创建web测试计划 在这一章,我们将学习如何创建基本的测试计划来测试一个web网站.您将创建五个用户并发送请求到JMeter网站的两个页面.同时,设置用户运行测试两次.因此,请求的总数是(5个用户)x ...

  10. selenium+python(数据驱动测试)

    自动化领域的两种驱动,对象驱动与数据驱动 数据驱动:测试数据的改变引起执行结果的改变 叫 数据驱动 关键字驱动:测试对象名字的改变起引起测试结果的改变 叫 关键字驱动 1 .读取文件参数化   以百度 ...