Tengo un botón que crea un div, pero es fácil ( const smth = document.createElemnt(div); ), pero el único problema es que es solo un div en blanco. Me gustaría que hubiera un div con un párrafo y un botón. ¿Cómo puedo hacer eso? Esto está en HTML y JS.
He intentado hacer:
(document.CreateElement(“p”); document.CreateElement(“button”))Por separado, pero eso no está en el div.
Espero que estés bien Si entiendo lo que quieres decir Quieres crear un div y agregarlo a ese elemento En JavaScript, primero debes crear el mismo div, luego usar appendChild para agregar otros elementos como p y button.
const divMain = document.querySelector('#main-container') const div = document.createElement('div'); const p = document.createElement('p'); // p.classList = ..... // p.textContent = ....... div.appendChild(p); divMain.append(div); console.log(divMain) <div id="main-container"></div>Ahora, para crear el botón, haga exactamente lo mismo que hicimos para crear la etiqueta p
Necesitas append elementos
let counter = 0; document.querySelector('.container').addEventListener('click', function (event) { if (event.target instanceof HTMLButtonElement) { const div = document.createElement('div'); const button = document.createElement('button'); const p = document.createElement('p'); button.textContent = 'Add'; p.textContent = `${++counter} element created`; div.classList.add('new'); div.append(button, p); this.append(div); } }); .new { border: 1px solid green; } .new p { display: inline-block; } <div class="container"> <button>Add</button> </div>aquí está la respuesta con jquery
$(document).ready(function(){ $("#mybtn").click(function(){ var myhtml=` <p>hello world</p> <button>hello!</button> `; $("#mydata").html(myhtml); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="mybtn"> click me! </button> <div id="mydata" style="background-color: lightblue"> </div>si no quiere usar jquery, vaya a jquery a convertidores de javascript como este