如何在不使用jQuery的情况下使用JavaScript创建动态div？

Question

我希望在网页上通过按钮点击实现动态分区，请告诉我最简单的解决方案，因为我是JavaScript新手。

- Android Programmer

---

请查看 http://www.w3.org/wiki/Creating_and_modifying_HTML，http://www.elated.com/articles/javascript-dom-intro/ 和 https://developer.mozilla.org/en-US/learn/javascript。 - Felix Kling

@Android程序员 - 欢迎来到SO。请先四处看看，检查是否已经有类似的问题在其他地方得到了解答。编码愉快 :) - Alok Swain

Answer 1

希望这能帮到您。

function divcreate() {
    var div = document.createElement("div");
    div.setAttribute("id", "mydiv");
    div.className = "mdiv";
    div.style.display = "none";
    document.body.appendChild(div);
}

- MR. Kumar

---

为什么要使用 div.setAttribute('id',...) 而不是 div.id = ...;？还有为什么您的代码左边有这么多空格？ - Felix Kling

现在可以了吗 Felix Kling ;) - MR. Kumar

Answer 2

要创建一个元素，使用createElement方法。

var mydiv = document.createElement('div');
//mydiv is a variable containing a newly created div

- Joseph

---

并且 document.body.appendChild(mydiv) - Grzegorz Kaczan

@GrzegorzKaczan，OP只提到了创建一个。 - Joseph

Answer 3

<button onclick="createDiv()">Click Me</button>

function createDiv(){
   var newDiv = document.createElement('div');
}

- SachinGutte

Answer 4

//创建一个如下的div

var div=document.createElement("div");
var node=document.createTextNode("This is new.");
div.appendChild(node);

然后将上述div添加到您想要它作为子元素的位置

var element=document.getElementById("some_parent_tag");
element.appendChild(div);

- Ashok