定义和用法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

提示： 如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。

你可以使用 appendChild() 方法移除元素到另外一个元素。

转移某个列表项到另外一个列表项：

var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

Coffee

Water

Coffee

• Water

尝试一下 »

浏览器支持

所有主要浏览器都支持 appendChild() 方法

node .appendChild( node ) 必须。你要添加的节点对象。 添加的节点 DOM 版本 Core Level 1 Node Object

• HTML / CSS
  • HTML 教程
  • HTML5 教程
  • CSS 教程
  • CSS3 教程
  • Bootstrap3 教程
  • Bootstrap4 教程
  • Bootstrap5 教程
  • Font Awesome 教程
  • Foundation 教程
• JavaScript
  • JavaScript 教程
  • HTML DOM 教程
  • jQuery 教程
  • AngularJS 教程
  • AngularJS2 教程
  • Vue.js 教程
  • Vue3 教程
  • React 教程
  • TypeScript 教程
  • jQuery UI 教程
  • jQuery EasyUI 教程
  • Node.js 教程
  • AJAX 教程
  • JSON 教程
  • Echarts 教程
  • Chart.js 教程
  • Highcharts 教程
  • Google 地图 教程
• 服务端
  • Python 教程
  • Python2.x 教程
  • Linux 教程
  • Docker 教程
  • Ruby 教程
  • Java 教程
  • C 教程
  • C++ 教程
  • Perl 教程
  • Servlet 教程
  • JSP 教程
  • Lua 教程
  • Rust 教程
  • Scala 教程
  • Go 教程
  • PHP 教程
  • 数据结构与算法
  • Django 教程
  • Zookeeper 教程
  • 设计模式
  • 正则表达式
  • Maven 教程
  • Verilog 教程
  • ASP 教程
  • AppML 教程
  • VBScript 教程
• 数据库
  • SQL 教程
  • MySQL 教程
  • PostgreSQL 教程
  • SQLite 教程
  • MongoDB 教程
  • Redis 教程
  • Memcached 教程
• 数据分析
  • Python 教程
  • NumPy 教程
  • Pandas 教程
  • Matplotlib 教程
  • Scipy 教程
  • R 教程
  • Julia 教程
• 移动端
  • Android 教程
  • Swift 教程
  • jQuery Mobile 教程
  • ionic 教程
  • Kotlin 教程
• XML 教程
  • XML 教程
  • DTD 教程
  • XML DOM 教程
  • XSLT 教程
  • XPath 教程
  • XQuery 教程
  • XLink 教程
  • XPointer 教程
  • XML Schema 教程
  • XSL-FO 教程
  • SVG 教程
• ASP.NET
  • ASP.NET 教程
  • C# 教程
  • Web Pages 教程
  • Razor 教程
  • MVC 教程
  • Web Forms 教程
• Web Service
  • Web Service 教程
  • WSDL 教程
  • SOAP 教程
  • RSS 教程
  • RDF 教程
• 开发工具
  • Eclipse 教程
  • Git 教程
  • Svn 教程
  • Markdown 教程
• 网站建设
  • HTTP 教程
  • 网站建设指南
  • 浏览器信息
  • 网站主机教程
  • TCP/IP 教程
  • W3C 教程
  • 网站品质