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. Vue.js 的精髓——组件

    开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...

  2. 关于z-index问题

    关于z-inde,这个网址还是对我受益匪浅的,https://www.cnblogs.com/bigboyLin/p/4621335.html z-index 起作用得有一个前提: 就是和定位一起用, ...

  3. c# 小票打印

    c# 在进行小票打印时大致有三种方法. 1. 使用水晶报表进行打印.可以参考:https://www.cnblogs.com/aitong/p/10717786.html 2. 在 PrintDocu ...

  4. word-wrap:表示是否允许流浪器断句，word-break:表示怎样断句

    word-wrap: break-word的话,流浪器可以断句,但是是按单词形式断句. 而加上 word-break: break-all的话,单词内部也断句. "whiteSpace&qu ...

  5. checkbox 框 选中判断

    function checkAll(checktop){ $(":checkbox[name='id']").prop("checked",checktop.c ...

  6. Dijkstra算法以及各种海量数据排序算法

    一.Dijkstra最短路径算法 是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中最短路径问题.迪杰斯特拉算法主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止. 实现一 // // D ...

  7. 生产html测试报告

    批量执行完用例后,生成的测试报告是文本形式的,不够直观,为了更好的展示测试报告,最好是生成 HTML 格式的.unittest 里面是不能生成 html 格式报告的,需要导入一个第三方的模块:HTML ...

  8. django notes 一：开篇

    公司 web 框架用的是 django, 以前没用过,打算这两周好好看看. 边学习边整理一下笔记,加深理解. 好像谁说过初学者更适合写入门级的教程,我觉得有一定道理. 高手写的教程有一定深度,不会写入 ...

  9. Python基础(5) - 文件

    Python Python提供的函数和方法方便地对文件进行读.写.删除等的操作. open()函数返回一个文件对象. open(name[, mode[, buffering]]) -> fil ...

  10. Java生成二维码和解析二维码URL

    二维码依赖jar包,zxing <!-- 二维码依赖 start --><dependency> <groupId>com.google.zxing</gro ...