Estoy tratando de entender JS y jQuery y tengo un código para agregar un elemento al DOM. Intento crear un nodo de texto y lo agrego al nodo del elemento y luego lo agrego a la primera etiqueta div, todo en una declaración. Entiendo que probablemente sea una mala práctica, pero solo quería ver si era posible. Parece que debería funcionar porque createElement() devuelve el nuevo objeto de elemento y llamo a appendChild() en ese objeto que agrega el objeto devuelto de createTextNode(). Sin embargo, lo que realmente ocurre es que se agrega el nodo de texto, pero no como un div. Parece que pasa por alto la función createElement por alguna razón. ¿Alguien podría explicar por qué, por favor? Incluso lo puse entre paréntesis para asegurarme de que se ejecuta primero sin éxito.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> 'use strict'; window.onload = () => { let dir = console.dir; let log = console.log; $('h1').hide(); $('body').click(() => $('h1').show('slow', () => log('called'))); }; function appendDiv() { document.getElementsByTagName('div')[0] .appendChild((document.createElement('div')) .appendChild(document.createTextNode('AppendedDiv'))); } </script> </head> <body> <h1 id="heading1" onclick="appendDiv();">JavaScript and jQuery Practice</h1> <p>Practice using JavaScript and jQuery here!</p> <div>DIV</div> <div>DIV</div> <div>DIV</div> <div>DIV</div>Tienes un extra () en la primera llamada de agregar
appendChild devuelve el elemento secundario agregado, por lo que llamar a elem.appendChild(div.appendChild(text)) en realidad agregaría text a elem y no un div con text secundario como pretendía. Solo debes separarlo:
function appendDiv() { const child = document.createElement('div'); child.appendChild(document.createTextNode('AppendedDiv')); document.getElementsByTagName('div')[0] .appendChild(child); }Tus paréntesis no coinciden. En lugar de agregar el div y luego agregarle el texto AppendedDiv , está agregando el texto AppendedDiv al div original. Ver comentario en este código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> 'use strict'; window.onload = () => { let dir = console.dir; let log = console.log; $('h1').hide(); $('body').click(() => $('h1').show('slow', () => log('called'))); }; function appendDiv() { document.getElementsByTagName('div')[0] .appendChild(document.createElement('div')) // <-- Match parentheses like this .appendChild(document.createTextNode('AppendedDiv')); // <- Match } </script> </head> <body> <h1 id="heading1" onclick="appendDiv();">JavaScript and jQuery Practice</h1> <p>Practice using JavaScript and jQuery here!</p> <div>DIV</div> <div>DIV</div> <div>DIV</div> <div>DIV</div>Esta es una gran razón para dividir estas cosas en varios pasos en lugar de hacerlo todo de una sola vez, ¡lo cual tiene razón al pensar que es "probablemente una mala práctica"! Es fácil que aparezcan errores sutiles como este.
La mejor práctica sería dividirlo en unos pocos pasos, algo como esto:
const wrapper = document.getElementsByTagName('div')[0]; const childDiv = document.createElement('div'); wrapper.appendChild(childDiv); childDiv.appendChild(document.createTextNode('AppendedDiv'));¡Mucho más legible!