<!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. python知识点记录（一）：

    1.如何使print输出不换行: 在print语句末尾加上一个英文逗号. 2.安装第三方模块时,用pip和easy_install是一样的.下载一个setuptools.exe安装好就有easy_in ...

  2. poj3180 强连通

    题意:给定一张 n 点 m 边的有向图,问有多少个强连通分量点数大于等于2 . 题意看懂基本就没有问题了. #include<stdio.h> #include<string.h&g ...

  3. Postgres 9.4 feature highlight: REPLICA IDENTITY and logical replication

    Among the many things to say about logical replication features added in PostgreSQL 9.4, REPLICA IDE ...

  4. Python for loop and while loop

    #!pyton2 #-*- coding:utf-8 -*- for letter in "Python": print "Current letter is:" ...

  5. UML的类图、时序图表示方法以及惯例

    <UML类图图示样例>说明:http://wenku.baidu.com/link?url=DEaRFyVIAH4kZ7TolplfFhFhmAk3gFaNSOH7XPzfTnCWY4CB ...

  6. Linux系统性能和使用活动监控工具 sysstat

    Sysstat是一个非常方便的工具,它带有众多的系统资源监控工具,用于监控系统的性能和使用情况.我们在日常使用的工具中有相当一部分是来自sysstat工具包的.同时,它还提供了一种使用cron表达式来 ...

  7. R中，定义一个长度为0的向量

    定义一个长度为0的向量 > x<-c()> length(x)[1] 0 修改该向量的类型 > class(x)="numeric"> class(x ...

  8. SSH登陆 Write failed: Broken pipe解决办法

    新装的一台linux 6.4主机在所有参数调优以后,运行起来要跑的程序后.再通过su - www时,提示如下: su: cannot set user id: Resource temporarily ...

  9. 使用 Sublime、WebStorm 开发 Jade

    Sublime.WebStorm (PhpStorm) 是前端开发者的得力工具,开发 Jade 也不例外. 在配置这些软件的 Jade 开发环境前,请先在系统中安装 Node.js 和 Jade : ...

  10. 用wamp配置的环境，想用CMD连接mysql怎么连

    签:用wamp配置的环境   想用cmd连接mysql怎么连 进到d盘该目录     (cd切不了盘,就输入盘符加冒号回车,再cd到目录) WAMP装好后,mysql数据库运行时没有 mysql 和 ...