<!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. ubuntu QWT Qt

    1,下载QWT 2,解压进入QWT的目录 3,qmake,生成makefile文件 4,编译,make 5,安装,make install ,需要root 安装好后会在 /usr/local 目录下有 ...

  2. JSP知识点汇总

    有几种方法可以实现服务器内部跳转? 使用request对象提供的方法:request.getRequestDispatcher(String URI).forward(ServletRequest r ...

  3. QTreeWidget创建

    QTreeWidget.顾名思义,这个类用来展示树型结构.同前面说的QListWidget类似,这个类需要同另外一个辅助类QTreeWidgetItem一同使用.不过,既然是提供方面的封装类,即便是看 ...

  4. supervisor使用详解

    1.什么是supervisorsupervisor是用python写的一个进程管理工具,用来启动,重启,关闭进程. 2.supervisor的安装 pip install supervisor 3.s ...

  5. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  6. 27个知名企业品牌VI视觉识别系统规范手册

    Apple公司视觉设计规范 微软公司VI视觉系统 星巴克企业视觉规范手册 DELL品牌VI视觉手册 MTRADING品牌视觉规范 KFC视觉设计规范手册 麦当劳视觉规范 LEGO乐高玩具的品牌视觉规范 ...

  7. 使用.net的Cache框架快速实现Cache操作

    本文转载自:http://www.cnblogs.com/TianFang/p/3430169.html .NET 4.0中新增了一个System.Runtime.Caching的名字空间,它提供了一 ...

  8. redmine 配置邮件发送为async后，不能发送邮件（转载）

    通过参考:http://www.oschina.net/question/2005703_16688 之前configuration.yaml文件中email的相关配置如下: production: ...

  9. SESSION和COOKIE的作用和区别，SESSION信息的存储方式，如何进行遍历？

    二者的定义:当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有没有 ...

  10. 整合Apache+PHP教程

    首先修改Apache的配置文件,让Apache支持解析PHP文件,Apache配置文件在Apache安装目录的conf目录下的httpd.conf,打开此文件, 找到#LoadModule,在这个下面 ...