const pokemonContainer = document.getElementById('pokemonContainer'); pokemonContainer.innerHTML += ` <div> <section class="all-comments"></section> </div> `; const allComments = document.querySelector('.all-comments'); allComments.appendChild(<h1>Hello World</h1>); <div class="row" id="pokemonContainer"></div>Estoy intentando querySelector('.all-comments') pero como está en pokemonContainer, es por eso que regresa indefinido. ¿Alguien puede guiarme sobre cómo consultar seleccionar algo colocado en innerHTML como se indicó anteriormente?
Node.appendChild() espera un elemento de nodo como parámetro, puede crear un nodo de texto usando Document.createTextNode() :
allComments.appendChild(document.createTextNode('Hello World'));Manifestación:
const pokemonContainer = document.getElementById('pokemonContainer'); pokemonContainer.innerHTML += ` <div> <section class="all-comments"></section> </div> `; const allComments = document.querySelector('.all-comments'); allComments.appendChild(document.createTextNode('Hello World')); <div class="row" id="pokemonContainer"></div> Actualización: no puede pasar <h1>Hello World</h1> directamente a appendChild() . Primero debe crear un nodo del tipo que desee, luego establecer el texto y finalmente pasar ese nodo al método.
O: puede intentar usar Element.insertAdjacentHTML()
const pokemonContainer = document.getElementById('pokemonContainer'); pokemonContainer.innerHTML += ` <div> <section class="all-comments"></section> </div> `; const allComments = document.querySelector('.all-comments'); allComments.insertAdjacentHTML('beforeend', '<h1>Hello World</h1>'); <div class="row" id="pokemonContainer"></div>