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, e. g. 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"));
```
您可以通过将包含HTML的字符串分配给其innerHTML来替换父元素的内容：
```
parent.innerHTML = "<div></div>";
```
＃2 替换父母的内容。要添加到，您可以再次使用insertAdjacentHTML，并使用包含HTML的字符串：
```
parent.insertAdjacentHTML("beforeend", "<div></div>");
```

想在MDN's DOM section中发现。

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 个答案: