CODEWITHSUNDEEP
javascripthtmlcss
MingLi
MingLi

Reputation: 53

Is it possible to dynamically create divs using ONLY html, css and javascript?

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?

Upvotes: 0

Views: 6225

Answers (5)

Arshiya Khanam
Arshiya Khanam

Reputation: 613

<!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.

Upvotes: 0

Tony
Tony

Reputation: 17647

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>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074375

There are lots of ways to do it.

  1. The obvious one is the mysteriously-named createElement, usually combined with appendChild and/or insertBefore:

    parent.appendChild(document.createElement("div"));

  2. You can replace the contents of a parent element by assigning a string containing HTML to its innerHTML:

    parent.innerHTML = "<div></div>";

  3. #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.

Upvotes: 2

CodeF0x
CodeF0x

Reputation: 2682

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>

Upvotes: 4

TheFrozenOne
TheFrozenOne

Reputation: 1715

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

Upvotes: 1

Related Questions