<!DOCTYPE html>

<html>

<body>

<ul id="myList">

  <li>Coffee</li>

  <li>Tea</li>

</ul>

<p id="demo">请点击按钮向列表中添加项目。</p>

<button onclick="myFunction()">亲自试一试</button>

<script>

function myFunction()

{

var node=document.createElement("LI");

var textnode=document.createTextNode("Water");

node.appendChild(textnode);

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

}

</script>

<p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>

</body>

</html>
  • Coffee
  • Tea
  • Water
  • Water

请点击按钮向列表中添加项目。

注释：首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。

HTML DOM appendChild() 方法的更多相关文章

  1. DOM 对象方法

    DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定 ...

  2. appendChild()方法遇到的问题

    在使用appendChild()方法中遇到了一个问题: 下面的代码可以正常插入多个新元素 <input type="button" value="在后面插入新元素& ...

  3. 踩坑所引发出的appendChild方法的介绍

    问题描述 最近在做项目时,遇到一个问题,当js生成一个组件后,会注入到页面的某个节点里显示.在组件内部进行了一次注入操作,在调用组件的外部js文件中也进行了一次注入操作,结果发现页面里只生成了一份组件 ...

  4. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  5. HTML DOM submit() 方法

    HTML DOM submit() 方法 HTML DOM Form 对象 定义和用法 submit() 方法把表单数据提交到 Web 服务器. 语法 formObject.submit() 说明 该 ...

  6. Vue 中 diff 算法后更新 DOM 的方法

    vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM. 网上的 ...

  7. 使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery DOM 元素方法（get）

    jQuery DOM 元素方法 1..get() 获得由选择器指定的 DOM 元素. $(selector).get(index)index 可选.规定获取哪个匹配元素(通过 index 编号). 实 ...

  9. HTML DOM focus() 方法

    目录 HTML DOM focus() 方法 实例 定义和使用 浏览器支持 语法 参数 技术描述 更多实例 实例 实例 HTML DOM focus() 方法 实例 为 <a> 元素设置焦 ...

随机推荐

  1. 数迹学——Asp.Net MVC4入门指南（2）：添加一个控制器

    自嘲一下......万事还是得从官方的入门开始 由于找不到适合新新手的MVC入门实例所以回过头来做一下微软的 <Asp.Net MVC4入门指南>. 只有把自己放在太阳下暴晒,才知道自己有 ...

  2. Python-select详解（select、epoll）

    select函数操作集合的时候有个要求,要么集合本身是描述符,要么他提供一个fileno()接口,返回一个描述符. I/O多路复用是在单线程模式下实现多线程的效果,实现一个多I/O并发的效果.看一个简 ...

  3. Centreon 监控报警

    1.系统更新:yum update 2.安装组件:yum install -y httpd php-pear php php-mysql php-gd php-ldap php-xml php-mbs ...

  4. MapReduce的输入输出

    mapper和reducer的划分 mapper的数量等于输入文件被划分成的分块数,这取决于输入文件的大小以及文件块的大小.一个map操作只处理一个输入分片.运行作业的客户端通过调用getSplits ...

  5. c++读写二进制文件

    要读取文件必须包含<fstream>头文件,这里包含了C++读写文件的方法,可以使用fstream 类,这个类可以对文件进行读写操作.   1.打开文件.   打开文件可以有两种方式,第一 ...

  6. C#创建datatable

    Asp.net DataTable添加列和行的方法 方法一: DataTable tblDatas = new DataTable("Datas"); DataColumn dc ...

  7. js反射机制

    本文转载自:http://blog.csdn.net/liuzizi888/article/details/6632434 什么是反射机制反射机制指的是程序在运行时能够获取自身的信息.例如一个对象能够 ...

  8. OAF_JDBC系列1 - 数据库交互取值方式（案例）

    2014-06-15 Created By BaoXinjian

  9. Centos6.4 用rpm方式安装MySql5.6

    1.查看系统是否安装了MySQL     使用命令:     #rpm -qa | grep mysql    2.卸载已安装的MySQL      卸载mysql命令如下:       #rpm - ...

  10. MYSQL C API : mysql_real_escape_string 二进制数据存储

    #include <iostream> #include <string> #include <string.h> #include <mysql.h> ...