I'm trying to add (and display) divs when a user presses a button, I'm also using css grids. I've had a look here and all the solutions advise using angular js or node js.
I've recently (last week) learnt html, css and javascript and I'm pressed for time hence I'm asking if is it possible to create these divs without angular js or node js?
You can create HTML elements by using createElement
It's acutally pretty simple:
function add() {
// Create element; can be whatever you want, e. g. div, h1, p, img...
var div = document.createElement('div');
// Set some attributes
div.style.width = '200px';
div.style.height = '200px';
div.style.backgroundColor = 'red';
// Append the div to the body
document.body.appendChild(div);
}
<button onclick="add()">Add div</button>
There are lots of ways to do it.
The obvious one is the mysteriously-named createElement, usually combined with appendChild and/or insertBefore:
parent.appendChild(document.createElement("div"));
You can replace the contents of a parent element by assigning a string containing HTML to its innerHTML:
parent.innerHTML = "<div></div>";
#2 replaces the parent's content. To add to it, you can use insertAdjacentHTML, again with a string containing HTML:
parent.insertAdjacentHTML("beforeend", "<div></div>");
Lots to discover in MDN's DOM section.
Yes, you can use document.createElement
Try this:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script>
function CreateDiv(){
var myDiv = document.createElement("DIV"); // Create a <div> node
var myTextNode = document.createTextNode("Hello World"); // Create a text node
myDiv.appendChild(myTextNode); // Append the text
//document.getElementById("myList").appendChild(node); // Append
document.body.appendChild(myDiv);
}
</script>
<input type="button" onclick="CreateDiv();" value="Create div">
</body>
</html>
You can use the native createElement() method.
var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode("CLICK ME"); // Create a text node
btn.appendChild(t); // Append the text to <button>
document.body.appendChild(btn); // Append <button> to <body>
https://www.w3schools.com/jsref/met_document_createelement.asp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrap">
<button class="btn"
onclick="document.getElementById('text').innerHTML = 'Hello'">
Click On Me</button>
<p id="text"></p>
</div>
</body>
</html>Check this one.
