<!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. 【IOI2000】邮局设置问题

    现在连基础DP都要看题解和代码才能写出来了,怎么办嘛QAQ 原题: 一些村庄建在一条笔直的高速公路边上,我们用一条坐标轴来描述这条公路,每个村庄的坐标都是整数,没有两个村庄的坐标相同.两个村庄的距离定 ...

  2. TRUNCATE,DORP,DELETE

    TRUNCATE,DORP,DELETE 相同点: truncate和不带where子句的delete, 以及drop都会删除表内的数据 不同点: 1. truncate和 delete只删除数据不删 ...

  3. vb6 获取 http only 的 Cookie

    Option Explicit ' No more data is available. ' The data area passed to a system call is too small. P ...

  4. 苹果Mac OS X显示隐藏文件的方法

    苹果Mac OS X显示隐藏文件的方法有很多种,这里介绍一种最简单的, 方法/步骤     打开“终端”,根据自己的版本选择命令   早期的OS X(10.6~10.8)系统可以使用如下两条命令来开始 ...

  5. ClientAbortException 异常解决办法

    http://blog.sina.com.cn/s/blog_43eb83b90102ds8w.html ClientAbortException 异常解决办法 当我们用Servlet导出图片,或用J ...

  6. centos之Haproxy 负载均衡学习笔记

    HAProxy的特点是:1.支持两种代理模式:TCP(四层)和HTTP(七层),支持虚拟主机:2.能够补充Nginx的一些缺点比如Session的保持,Cookie的引导等工作3.支持url检测后端的 ...

  7. Error: Error #2014: Feature is not available at this time. at flash.filesystem::File$/initDocumentsDir()

    Error: Error #2014: Feature is not available at this time. at flash.filesystem::File$/initDocumentsD ...

  8. XMPP协议错误码

    302 重定向 尽管HTTP规定中包含八种不同代码来表示重定向,Jabber只用了其中一个(用来代替所有的重定向错误).不过Jabber代码302是为以后的功能预留的,目前还没有用到 400 坏请求  ...

  9. Data Science at the Command Line学习笔记（一）

    学习Data Science at the Command Line时,win7下安装环境是遇到了一些小问题,最后通过百度解决. 官方指导可以在这个地址找到:http://datascienceatt ...

  10. 对SSH三大框架的理解

    SSH框架一般指的是Struts.Spring.Hibernate,后来Struts2代替了Struts.最近5年,Struts2已经被Spring MVC代替,而Hibernate基本也被iBati ...