是否可以仅使用html，css和javascript动态创建div？

Question

我试图在用户按下按钮时添加（并显示）div，我也在使用css网格。 我在这里看过，所有解决方案都建议使用angular js或node js。

我最近（上周）学习了html，css和javascript，由于时间紧迫，所以我问是否可以在没有angular js或node js的情况下创建这些div？

Answer 1

您可以使用createElement创建HTML元素

这非常简单：

 function add() { // Create element; can be whatever you want, eg div, h1, p, img... var div = document.createElement('div'); // Set some attributes div.style.width = '200px'; div.style.height = '200px'; div.style.backgroundColor = 'red'; // Append the div to the body document.body.appendChild(div); }

 <button onclick="add()">Add div</button>

Answer 2

有很多方法可以做到这一点。

显而易见的是一个神秘命名的createElement ，通常与appendChild和/或insertBefore结合使用：
```
 parent.appendChild(document.createElement("div")); 
```
您可以通过向其innerHTML分配包含HTML的字符串来替换父元素的内容：
```
 parent.innerHTML = "<div></div>"; 
```
＃2 替换父母的内容。 要添加到它，您可以再次使用insertAdjacentHTML ，同时使用包含HTML的字符串：
```
 parent.insertAdjacentHTML("beforeend", "<div></div>"); 
```

在MDN的DOM部分中有很多发现。

Answer 3

是的，您可以使用document.createElement

尝试这个：

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <script>    
            function CreateDiv(){
                var myDiv = document.createElement("DIV"); // Create a <div> node
                var myTextNode = document.createTextNode("Hello World"); // Create a text node
                myDiv.appendChild(myTextNode); // Append the text 

                //document.getElementById("myList").appendChild(node); // Append 
                document.body.appendChild(myDiv);
            }

        </script>
        <input type="button" onclick="CreateDiv();" value="Create div">
    </body>
</html>

Answer 4

您可以使用本机的createElement（）方法。

var btn = document.createElement("BUTTON");        // Create a <button> element
var t = document.createTextNode("CLICK ME");       // Create a text node
btn.appendChild(t);                                // Append the text to <button>
document.body.appendChild(btn);                    // Append <button> to <body>

https://www.w3schools.com/jsref/met_document_createelement.asp

Answer 5

 <!DOCTYPE html> <html> <head> </head> <body> <div class="wrap"> <button class="btn" onclick="document.getElementById('text').innerHTML = 'Hello'"> Click On Me</button> <p id="text"></p> </div> </body> </html>

检查这个。

是否可以仅使用html，css和javascript动态创建div？

问题描述

5 个解决方案

解决方案1
2 2018-06-20 14:03:55

解决方案2
2 2018-06-20 14:04:48

解决方案3
2 2018-06-20 14:05:46

解决方案4
1 2018-06-20 14:03:13

解决方案5
0 2018-10-10 09:37:09

是否可以仅使用html，css和javascript动态创建div？

问题描述

5 个解决方案

解决方案1 2 2018-06-20 14:03:55

解决方案2 2 2018-06-20 14:04:48

解决方案3 2 2018-06-20 14:05:46

解决方案4 1 2018-06-20 14:03:13

解决方案5 0 2018-10-10 09:37:09

解决方案1
2 2018-06-20 14:03:55

解决方案2
2 2018-06-20 14:04:48

解决方案3
2 2018-06-20 14:05:46

解决方案4
1 2018-06-20 14:03:13

解决方案5
0 2018-10-10 09:37:09