Soy completamente nuevo en Javascript (y Stack Overflow) y quiero crear un blog que permita al usuario crear un div al hacer clic. Hice referencia a este artículo sobre w3shool y probé los tres métodos enumerados. Sin embargo, el div no aparece cuando uso los dos primeros métodos y aparece sin hacer clic cuando uso el tercero.
Aquí está mi código para el tercer método:
HTML
<button class="box4" id="newEntry">NEW</button>JavaScript
const parent = document.getElementById("entries"); document.getElementById("newEntry").addEventListener("click", newEntry); function newEntry() { var newDiv = document.createElement("div"); parent.appendChild(newDiv); }Para el segundo método, reemplacé la línea 2 con
document.getElementById("newEntry").onclick= function () {newEntry()};He visto preguntas similares, pero ninguna resolvió mi problema, por lo que agradecería mucho su ayuda.
No hay nada malo con tu código. Funciona bien. solo una cosa que debe recordar: Div por defecto no tiene altura, por lo que si quiere asegurarse de visualizarlo, solo agregue altura y color, como el código a continuación.
const parent = document.getElementById("entries"); parent.style.width = '150px'; parent.style.height = '150px'; parent.style.backgroundColor = 'red'; document.getElementById("newEntry").addEventListener("click", newEntry); function newEntry() { var newDiv = document.createElement("div"); newDiv.style.width = '50px'; newDiv.style.height = '50px'; newDiv.textContent = 'Entry'; newDiv.style.backgroundColor = 'white'; parent.appendChild(newDiv); } <div id="entries"></div> <button id="newEntry">new Entry</button>Aquí hay un ejemplo:
Puede usar querySelectorAll con un selector css para consultar todos los elementos que coincidan con el selector, pero también puede usar getElementByName . En su ejemplo, consulta los elementos por ID, pero no sé dónde establece los ID.
function onInitClick(){ const buttons = document.querySelectorAll('button'); const secondButton = buttons[1]; secondButton.addEventListener('click', createButtonAndAppend); secondButton.innerText = 'Click me'; } function createButtonAndAppend(){ const button = document.createElement('button'); button.addEventListener('click', createButtonAndAppend); button.innerText = 'Adds another button'; document.body.append(button); } <button onclick="onInitClick();">Add click to second button</button> <button>Nothing happens</button>puedes hacerlo simplemente usando jquery.
si quieres agregar algo a div,
$("#your_div_id").html("your child element")por ejemplo
<div id="example"></div> $("#example").html("<h1>Hello world</h1>")entonces el resultado es
<div id="example"><h1>Hello world</h1></div>