I have a button that creates a div, that but is easy (const smth = document.createElemnt(div);), but the only problem is it is just a blank div. I would like there to be a div with a paragraph and button in it. How do I do that? This is in HTML and JS.
I have tried to do:
(document.CreateElement(“p”);
document.CreateElement(“button”))
Separately but that isn’t on the div.
I hope you are well If I understand what you mean You want to create a div and add it to that element In JavaScript, you must first create the same div, then use appendChild to add other elements such as p and 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>Now to create the button, do exactly the same thing we did to create the p tag
You need to append elements
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>here is answer with 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>if you don't want to use jquery than go for jquery to javascript converters like this