dynamically added div not appearing
Question
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);
}
2 answers
solution1
1 2021-05-22 19:56:53
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>
solution2
0 ACCPTED 2021-05-22 20:02:20
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.