"Creating and appending a new div element to the DOM using JavaScript

Question

"Creating and appending a new div element to the DOM using JavaScript

Is there a way to dynamically add an element with the same id when clicking a button that is linked to JavaScript without any existing JS in place? I initially considered using document.write and then appending a div, but this approach did not work for me. Additionally, I have heard that this practice is not recommended.

This is what I currently have:

HTML:

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
    <body>
        <button type="button" onclick="NewDiv()">Click me</button>
        <div id="first"></div>
    </body>
</html>

CSS:

#first{
    width: 100px;
    height: 100px;
    background-color: red;
}

javascript html css

Answer 1

Answer №1

One way to accomplish this is by using the document.createElement(tagName) method.

Check out more information here

function CreateNewDiv() {
   var newElement = document.createElement("div");

   document.getElementById("parentContainerId").appendChild(newElement);
}

Answer 2

One way to accomplish this is by using the document.createElement(tagName) method.

Check out more information here

function CreateNewDiv() {
   var newElement = document.createElement("div");

   document.getElementById("parentContainerId").appendChild(newElement);
}

Answer 3

Answer №2

If you want to apply the same CSS styles to multiple elements, it's best to use classes instead of duplicate IDs. Using classes ensures consistency and prevents unexpected behavior in JavaScript.

Instead of using 'id', switch to using 'class' in your HTML:

<!DOCTYPE html/>
<html>
    <head>
        <title>My Page</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <button type="button" onclick="createNewDiv()">Click me</button>
        <div class="myClass"></div>
    </body>
</html>

To define a class in CSS, use the '.' prefix like this:

.myClass{
    width: 100px;
    height: 100px;
    background-color: blue;
}

In JavaScript, create a new div element with the specified class:

<script>
    function createNewDiv()
    {
        var newDiv = document.createElement("div");
        newDiv.className = "myClass";
        newDiv.id = "someUniqueId"; //optional
    }
</script>

Answer 4

If you want to apply the same CSS styles to multiple elements, it's best to use classes instead of duplicate IDs. Using classes ensures consistency and prevents unexpected behavior in JavaScript.

Instead of using 'id', switch to using 'class' in your HTML:

<!DOCTYPE html/>
<html>
    <head>
        <title>My Page</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <button type="button" onclick="createNewDiv()">Click me</button>
        <div class="myClass"></div>
    </body>
</html>

To define a class in CSS, use the '.' prefix like this:

.myClass{
    width: 100px;
    height: 100px;
    background-color: blue;
}

In JavaScript, create a new div element with the specified class:

<script>
    function createNewDiv()
    {
        var newDiv = document.createElement("div");
        newDiv.className = "myClass";
        newDiv.id = "someUniqueId"; //optional
    }
</script>

Answer 5

Answer №3

Use this Code Snippet:

HTML:

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
       <body>
            <button type="button" id="click-me">Click me</button>
            <div id="first" class="common-css"></div>
        </body>
</html>

CSS:

.common-css{
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript:

document.getElementById('click-me').onclick = function() {
   var newDiv = document.createElement('div');
   var firstDiv = document.getElementById('first');
   newDiv.setAttribute('class', 'common-css');
   firstDiv.appendChild(newDiv);
};

JSFiddle link: http://jsfiddle.net/vinoddalvi/u4H9h/

Answer 6

Use this Code Snippet:

HTML:

<!DOCTYPE html/>
<html>
    <head>
        <title>wat</title>
        <meta charset= "UTF-8">
        <link rel="stylesheet" type="text/css" href="CssHtmlLapai.css">
        <script src="JsLapai.js"></script>
    </head>
       <body>
            <button type="button" id="click-me">Click me</button>
            <div id="first" class="common-css"></div>
        </body>
</html>

CSS:

.common-css{
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript:

document.getElementById('click-me').onclick = function() {
   var newDiv = document.createElement('div');
   var firstDiv = document.getElementById('first');
   newDiv.setAttribute('class', 'common-css');
   firstDiv.appendChild(newDiv);
};

JSFiddle link: http://jsfiddle.net/vinoddalvi/u4H9h/

Answer 7

Answer №4

If you want to replicate an element using jQuery:

$('button').click(function() {
    $('#first').first().clone().appendTo('body');
});

Check out this example on jsFiddle

Answer 8

If you want to replicate an element using jQuery:

$('button').click(function() {
    $('#first').first().clone().appendTo('body');
});

Check out this example on jsFiddle

"Creating and appending a new div element to the DOM using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the proper way to transfer data to PHP using AJAX?

Looping through a Vue Bootstrap modal using a v-for directive

Scan webpage for checkbox elements using JavaScript

There seems to be a problem with the Chart property getter as it

What is the process for executing JavaScript within an ASP.Net Web Form application's update panel using server-side code?

Is sending an AJAX request to a Node.js Express application possible?

Horizontal alignment of navigation bar items using <ul>

The hyperlinks are not functioning correctly on my template

ajax memory leakage

Are you attempting to retrieve the most up-to-date trading price of a stock with Python?

Pass the responsibility to another component or initiate an ajax request in react

"Enhance your data manipulation with Angular 2's *ngIf: A stylish

What happens when you click and trigger mouseleave?

Preventing Copy and Paste and Right-Click Actions With JavaScript

Unable to modify a variable within a request

Use jQuery to create a toggle effect with unique attributes and incorporate AJAX functionality

The function did not receive the parameter when ng-submit was executed

Printing CSS in ASP.NET without a print dialog box or a pop-up confirmation message after successful printing

"Once the item was returned, its style seemed to have disappeared from

Tips for finding and showcasing content from a JSON file in an HTML format