是否可以僅使用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