Tengo dos botones MOSTRAR y OCULTAR. Cuando se hace clic en mostrar, aparecerán números (que son archivos json, cada archivo json contiene solo un número 1, 2, 3 ...) cuando se hace clic en OCULTAR, el primer número (json) en una fila desaparece. Por ejemplo, hicimos clic en el botón MOSTRAR 3 veces y obtuvimos esto: 1 2 3 y luego hicimos clic en OCULTAR una vez y luego obtuvimos: 2 3 mostrado. Mi problema es que cuando se hace clic en OCULTAR, quiero guardar ese número oculto mostrándolo en mi div donde id="nome". Después de hacer clic en el botón OCULTAR, se muestra otro número oculto y el antiguo se elimina de div. Intenté esto:
var pageCounter = 1; var pageCounterr = 1; var animalContainer = document.getElementById("animal-info"); var animalContainerr = document.getElementById("nome"); var btn = document.getElementById("btn"); var btnn = document.getElementById("btnn"); btn.addEventListener("click", function(){ var ourRequest = new XMLHttpRequest(); ourRequest.open('GET','http://10.0.9.243/animals-'+ pageCounter + '.json'); ourRequest.onload = function(){ var ourData = JSON.parse(ourRequest.responseText); renderHTML(ourData); }; ourRequest.send(); pageCounter++; }); function renderHTML(data) { var htmlString = document.createElement("div"); for (i=0; i < data.length; i++){ let pText = document.createTextNode(data[i].name); let pElement = document.createElement("p"); pElement.append(pText); htmlString.append(pElement); htmlString.classList.add('containers') // new Line added } animalContainer.append(htmlString); } btnn.addEventListener("click", function(){ let containers = document.getElementsByClassName('containers'); if(containers.length > 0){ document.getElementById("nome").innerHTML = containers[0]; containers[0].remove(); } }); <button id="btn">SHOW</button> <button id="btnn">HIDE</button> <h2>Numbers:</h2> <div id="animal-info"></div> <h2>Hidden number is:</h2> <div id="nome"></div>Y lo que obtengo como resultado es '[object HTMLDivElement] ' in div with id="nome".
Lo único que falla es la lógica utilizada, mira esto:
Cuando obtiene elementos por nombre de clase "contenedor", obtiene una matriz de esto: var htmlString = document.createElement ("div");
Porque definiste la clase de ese elemento a: htmlString.classList.add('containers')
Entonces solo obtienes div.
Solución: dentro de este elemento tienes un elemento "p", y dentro tienes un nodo de texto con el contenido que deseas.
Simple, buena programación para ti.