CODEWITHSUNDEEP
javascript
wayfarer
wayfarer

Reputation: 790

dynamically added div not appearing

I'm trying dynamically add a div to a page. This is in Chrome. I've looked at several instructions pages. Seems like this should work, but no joy. I added style attributes that would make it obviously apparent, just to get started. The code is executed, per "Inspect", but no element is appearing. Also the element does not show up in "Inspect/Elements/Find".

function CreateDragClone(partType) {
var cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
//cloneContainer.setAttribute("class", "closeContainer");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.zIndex = "100000";
document.body.append(cloneContainer);

}

Upvotes: 1

Views: 474

Answers (2)

Ran Turner
Ran Turner

Reputation: 18026

You need to specify height and width to the created element.

One more thing, partType is passed as an argument but not being used, so you can remove it. 

function CreateDragClone() {
var cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
//cloneContainer.setAttribute("class", "closeContainer");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.zIndex = "100000";
cloneContainer.style.width = "100px";
cloneContainer.style.height = "100px";
document.body.append(cloneContainer);
}

CreateDragClone();

Upvotes: 0

Lianel
Lianel

Reputation: 159

With this code you should get a little red dot representing de borderWidth; Your code is almost done, you just forgot to add width and height to the div element, on the other hand, camelCase shouldn't have the first letter in uppercase.

(function createDragClone() {
  const cloneContainer = document.createElement("div");
  cloneContainer.setAttribute("id", "cloneDiv");
  cloneContainer.style.visibility = "visible";
  cloneContainer.style.position = "absolute";
  cloneContainer.style.borderStyle = "solid";
  cloneContainer.style.borderColor = "red";
  cloneContainer.style.borderWidth = "1px";
  cloneContainer.style.top = "200px";
  cloneContainer.style.left = "200px";
  cloneContainer.style.width = "200px";
  cloneContainer.style.height = "200px";
  cloneContainer.style.zIndex = "100000";
  document.body.append(cloneContainer);
})();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
  </body>
</html>

Upvotes: 1

Related Questions