Nodo appendChild - API web | MDN
Skip to main content
Skip to search
MDN
HTML
HTML: Markup language
HTML reference
Elements
Global attributes
Attributes
See all…
HTML guides
Responsive images
HTML cheatsheet
Date & time formats
See all…
Markup languages
SVG
MathML
XML
CSS
CSS: Styling language
CSS reference
Properties
Selectors
At-rules
Values
See all…
CSS guides
Box model
Animations
Flexbox
Colors
See all…
Layout cookbook
Column layouts
Centering an element
Card component
See all…
JavaScriptJS
JavaScript: Scripting language
JS reference
Standard built-in objects
Expressions & operators
Statements & declarations
Functions
See all…
JS guides
Control flow & error handing
Loops and iteration
Working with objects
Using classes
See all…
Web APIs
Web APIs: Programming interfaces
Web API reference
File system API
Fetch API
Geolocation API
HTML DOM API
Push API
Service worker API
See all…
Web API guides
Using the Web animation API
Using the Fetch API
Working with the History API
Using the Web speech API
Using web workers
All
All web technology
Technologies
Accessibility
HTTP
URI
Web extensions
WebAssembly
WebDriver
See all…
Topics
Media
Performance
Privacy
Security
Progressive web apps
Learn
Learn web development
Frontend developer course
Getting started modules
Core modules
MDN Curriculum
Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module
CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module
Tools
Discover our tools
Playground
HTTP Observatory
Border-image generator
Border-radius generator
Box-shadow generator
Color format converter
Color mixer
Shape generator
About
Get to know MDN better
About MDN
Advertise with us
Community
MDN on GitHub
Blog
Toggle sidebar
Tecnología web para desarrolladores
API web
Node
Nodo appendChild
Theme
OS default
Light
Dark
Español
Remember language
Learn more
Deutsch
English (US)
Español
Français
日本語
한국어
Português (do Brasil)
Русский
中文 (简体)
Esta página ha sido traducida del inglés por la comunidad.
Aprende más y únete a la comunidad de MDN Web Docs.
View in English
Always switch to English
Nodo appendChild
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
Learn more
See full compatibility
Agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado.
Si el hijo(Child) es una referencia(hace referencia) hacia un nodo existente en el documento actual, este es quitado del padre actual para ser puesto en el nodo padre nuevo. La clave está en si el (Child) es una referencia a un nodo existente en el documento.
Nota:
Nueva API disponible
El método ParentNode.append() soporta varios argumentos y cadenas para adjuntar.
In this article
Sintaxis
Notas
Ejemplo
Especificaciones
Compatibilidad con navegadores
Ver también
Sintaxis
element.appendChild(aChild);
Parámetros
aChild
El nodo a adjuntar al nodo padre proporcionado (normalmente un elemento).
Valor de retorno
El valor devuelto es el hijo adjunto excepto cuando el hijo proporcionado es un DocumentFragment, en cuyo caso el DocumentFragment vacío es devuelto.
Notas
El encadenamiento podría no funcionar como se espera debido a que appendChild() devuelve un elemento hijo:
js
var aBlock = doc.createElement("block").appendChild(doc.createElement("b"));
Establece aBlock como <b></b> sólo, que no es probablemente lo que quieras.
Si el child hace una referencia a un nodo existente en el documento, el método appendChild se mueve de su posición actual a su nueva posición (ej. no existen requerimientos para eliminar el nodo desde su nodo padre antes de añadirlo a cualquier otro nodo).
Ésto significa también que el nodo no puede estar en dos puntos del documento de manera simultánea. Así que si el nodo ya contiene un padre, primero es eliminado, y después se añade a la nueva posición.
Se puede usar Node.cloneNode para hacer una copia del nodo antes de añadirlo debajo de su nuevo elemento padre. (Nota: las copias echas con cloneNode no serán guardadas automáticamente en sincronía.)
Éste método no es permitido para mover nodos entre distintos documentos. Si se quiere añadir un nodo desde un documento diferente (por ejemplo para mostrar los resultados de una petición AJAX) se debe usar primero:
document.importNode.
appendChild() Es uno de los métodos fundamentales de la programación web usando el DOM. El método appendChild() inserta un nuevo nodo dentro de la estructura DOM de un documento, y es la segunda parte del proceso central uno-dos, crear-y-añadir para construir páginas web a base de programación.
Ejemplo
js
// Crea un nuevo elemento párrafo, y lo agrega al final del cuerpo del documento
var p = document.createElement("p");
document.body.appendChild(p);
Especificaciones
Specification
DOM
# dom-node-appendchild
Compatibilidad con navegadores
Enable JavaScript to view this browser compatibility table.
Ver también
Node.removeChild
Node.replaceChild
Node.insertBefore
Node.hasChildNodes
ParentNode.append()
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 21 jul 2025 by MDN contributors.
View this page on GitHub • Report a problem with this content
Filter sidebar
Clear filter input
Modelo de Objetos del Documento (DOM)
Node
Propiedades de instancia
baseURI
childNodes
firstChild
isConnected
lastChild
nextSibling
nodeName
nodeType
nodeValue
ownerDocument
parentElement
parentNode
previousSibling
textContent
Métodos de instancia
appendChild()
cloneNode()
compareDocumentPosition()
contains()
getRootNode()
hasChildNodes()
insertBefore()
isDefaultNamespace()
isEqualNode()
isSameNode()
lookupNamespaceURI()
lookupPrefix()
normalize()
removeChild()
replaceChild()
Eventos
selectstart
Herencia
EventTarget
Páginas relacionadas a DOM
AbortController
AbortSignal
AbstractRange
Attr
CDATASection
CharacterData
Comment
CustomEvent
DOMError
DOMException
DOMImplementation
DOMParser
DOMTokenList
Document
DocumentFragment
DocumentType
Element
Event
EventTarget
HTMLCollection
MutationObserver
MutationRecord
NamedNodeMap
NodeIterator
NodeList
ProcessingInstruction
QuotaExceededError
Range
ShadowRoot
StaticRange
Text
TreeWalker
XMLDocument
XPathEvaluator
XPathExpression
XPathResult
XSLTProcessor
Guías
Anatomy of the DOM
Attribute reflection
Localizando elementos DOM usando selectores
Trazado de una tabla HTML mediante JavaScript y la Interface DOM
Referencia de Eventos
MDN
Your blueprint for a better internet.
MDN
About
Blog
Mozilla careers
Advertise with us
MDN Plus
Product help
Contribute
MDN Community
Community resources
Writing guidelines
MDN Discord
MDN on GitHub
Developers
Web technologies
Learn web development
Guides
Tutorials
Glossary
Hacks blog
Mozilla
Website Privacy Notice
Telemetry Settings
Legal
Community Participation Guidelines
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.