CODEWITHSUNDEEP
javascripthtmlcssfunction
Sam Holland
Sam Holland

Reputation: 59

How to create a div using JavaScript?

I have the following <div> which I have created using HTML and CSS. I don't want these divs to be created when the page loads, instead I would like them to be created only when a JavaScript function is executed.

I would prefer if they were actually created by the function, if possible, rather than being hidden/unhidden

Is there a way I can add this exact HTML code inside the function, or will I need to use JavaScript to create these divs? If I need to use JavaScript would someone be able to explain how?

HTML

   <div class = 'rowcontainer' id = "r<?php echo $studentid ?>" >
       <div class = 'name'><t><?php echo $firstname," ",$lastname; ?></t></div>
       <div class = 'ako'><t><?php echo $ako; ?></t></div>
       <div class = 'select'>
            <input type = 'checkbox' class = 'checkbox move'>
       </div>
   </div>

CSS

.rowcontainer {
    width: 100%;
    height: 30px;
}

.name {
    line-height: 30px;
    float: left;
    width: 60%;
    height: 100%;
    padding-left: 15px
}

.ako {
    line-height: 30px;
    text-align: center;
    float: left;
    width: 20%;
    height: 100%;
}

.select {
    line-height: 30px;
    text-align: center;
    float: right;
    width: 15%;
    height: 100%;
}

.checkbox {
    height: 17px;
    width: 17px;
    margin: auto;
    margin-top: 6px;
}

Thanks for all the answers but unfortunately I cannot seem to get this to work. When I create a new document with the code below all I get is a blank window and the following error. Error 1 (new page) Also when I try and add this code to my existing page I get a similar error, and nothing changes on the page. Error 2 (existing page) What am I missing?

<body>
    <script>
        let div = document.createElement("div");
        div.id = "div_id" ;
        div.className = "div_class";
        div.style = "background-color: red;";
        div.style.width = "100px";
        div.style.height = "100px";
        document.appendChild("div");
    </script>
</body>

Upvotes: 2

Views: 18287

Answers (5)

Gass
Gass

Reputation: 9344

The error is caused by a bad implementation of the appendChild() method. You are passing the argument as a string: document.appendChild("div") instead of the created element .appendChild(div).

Also, you should specify to what tag you would like to append. In this case I'm using the <body> tag:

document.body.appendChild(div)

Try the following snippet:

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  
    const div = document.createElement("div");
    
    div.id = "div_id" ;
    div.className = "div_class";
    div.style = "background-color: red;";
    div.style.width = "100px";
    div.style.height = "100px";
    document.body.appendChild(div);  
  
});
<button id="btn" style="margin:10px">Create Div</button>

Upvotes: 4

Nicolas Billia
Nicolas Billia

Reputation: 1

To create a div element using JavaScript, you can use the following code:

// Create a new div element
var div = document.createElement("div");

// Set the div's content
div.innerHTML = "This is a div element.";

// Add the div to the page
document.body.appendChild(div);

This code creates a new div element, sets its content to "This is a div element", and then adds the div to the page by appending it to the body element.

You can also set the div's attributes, such as its id, class, and style, by using the setAttribute method:

// Set the div's id attribute
div.setAttribute("id", "myDiv");

// Set the div's class attribute
div.setAttribute("class", "myClass");

// Set the div's style attribute
div.setAttribute("style", "color: red; font-size: 20px;");

This code sets the id of the div to "myDiv", its class to "myClass", and its style to color: red; font-size: 20px;.

Once you have created the div and set its attributes, you can use it in your page just like any other div element.

Upvotes: 0

Techy Shadow
Techy Shadow

Reputation: 359

There is a method in javascript that lets you create a div, the command is document.createElement

You can also adjust its properties as per need.

Here is the code if you just want to create a div:

document.createElement("div");

But if you want to adjust its properties such as it's ID this should be your code:

let new_div = document.createElement("div");
div.id = "ID";

Upvotes: 1

Hridoy Chowdhury
Hridoy Chowdhury

Reputation: 148

Are you looking to do something like this? HTML:

<body>
    <section id="container">
        
    </section>
    <script src="app.js"></script>
</body>

Javascript:

const container = document.getElementById('container');
container.innerHTML=`
<div class = 'rowcontainer' id = "r<?php echo $studentid ?>" >
<div class = 'name'><t><?php echo $firstname," ",$lastname; ?></t></div>
<div class = 'ako'><t><?php echo $ako; ?></t></div>
<div class = 'select'>
     <input type = 'checkbox' class = 'checkbox move'>
</div>
</div>`;

You can use this with an onclick attribute.

Upvotes: -1

elad
elad

Reputation: 196

You can create divs dynamicly using JavaScript. using document.createElement to do so:

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

But its not enough for your code.

Divs are been rendered on a client computer. The browser know to read an html file and draw the ui on your screen by by it . Php is a server language . So when you mixing between php and html the server render the code to to a html templet so the client get only html. The client has no idea what to do with a php code.

Hiding divs is something the client should do.

So I think the better approach is separate the client code and the server code. To do that the client need to fetch the data you need from your php server and then create the dives dynamicly.

Another option, that relevant only if you want to create the divs once. I mean not remove and create the divs more than once. Is let the php server to create those div on command

Upvotes: 1

Related Questions