<!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. 利用css3新增选择器制作背景切换

    之前写css3的时间都是捡项目需要的来用,没有系统的学习过,这几天好好的补了一下css3的知识,真的获益匪浅!觉得新增的那些选择器是有用至极的!今天就来所这几天的所学做一个点击标签切换背景的效果,是纯 ...

  2. WebJars 进行 css js 资源文件管理

    WebJars是将这些通用的Web前端资源打包成Java的Jar包,然后借助Maven工具对其管理,保证这些Web资源版本唯一性,升级也比较容易.关于webjars资源,有一个专门的网站http:// ...

  3. python数据分析之pandas库的DataFrame应用一

    DataFrame是一个表格型的数据结构,它含有一组有序的列,每列可以是不同的值类型(数值,字符串,布尔型).DateFrame既有行索引也有列索引,可以被看作为由Series组成的字典. 构建Dat ...

  4. javascript 刷新当前页面

    编辑器加载中... 1. window.location.replace(window.location.href)

  5. docker中使用systemd

    由于以下几个原因,docker的官方centos镜像中没有提供systemd服务:   systemd requires the CAP_SYS_ADMIN capability. This mean ...

  6. Delphi下16进制位图数据转位图

    如果我们在Form中拖入一个Image控件,并设置好picture后,Alt+F12就可以看到Form的源代码中已经将图片转成了16进制字符串,如下: ? 1 2 3 4 5 6 7 8 9 10 1 ...

  7. 使用Python xlwt写excel文件

    如果需要使用Python写Excel文件,首先下载或者安装xlwt. pip install xlwt 下面的这些demo应该可以帮助开发者快速上手使用xlwt写Excel文件: 创建工作簿(work ...

  8. smarty中如何统计数组的个数？

    在做web前端中,很多人会遇到在smarty中如何统计数组的个数,其实很简单 比如数组$array 你只需要用{$array|@count}就可以获取.

  9. oracle数据库对象使用说明

    1.创建一个分区表,并插入一些数据,同时查询出每个分区的数据. 答:创建分区表如下 2.创建一个视图,并给出一个查询语句. 3.在当前用户下创建一个同义词,用于查询scott用户下的dept表,并给出 ...

  10. flex loaderInfo为null在creationComplete事件中

    原文: http://yunzhongxia.iteye.com/blog/1152670   Flex4中application变为FlexGlobals.topLevelApplication,很 ...