是否可以创建和删除div？

Question

我必须为我的学校项目制作一个网络仪表板。问题是我需要让用户能够创建和添加您在此图片中看到的方块

我不知道如何做到这一点，因为我不知道javascript，他们希望我们尽可能少地使用javascript。甚至可以在没有javascript的情况下完成它吗？

Answer 1

你可以用JavaScript做到这一点。您可以使用以下JavaScript创建div或任何其他标记：

var div = document.createElement("div"); // or any tag

然后设置该div的style属性：

div.style.width = "100px";
div.style.height = "100px";

查看this site以了解您可以设置/获取的其他属性。他们还有一个沙盒，在某个地方你可以使用代码来学习如何工作。

然后你可以设置div的内容。在这里，您可以为div添加更多HTML内容。

div.innerHTML = '<a href = "www.google.com">Google</a>';

最后将元素（在本例中为div）添加到您喜欢的任何元素中。在这里，我将其添加到具有id = "main-container"：

的元素中

document.getElementById("main-container").appendChild(div);

Answer 2

您可以使用jquery append

$("button").click(function(){
    $("body").append("<div>Appended div</div>");
});

如果您更喜欢纯JavaScript，请使用appendChild（）函数

var node = document.createElement("div");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("body").appendChild(node);