使用 JS 在 DOM 中创建元素

Question

我是初学者，很抱歉提出了一个愚蠢的问题。问题是我无法使用 JS 在 div "app" 中添加 div "title"。请帮助我。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "description" content = "Field v.1">
        <title> Field v.1 </title>

        <style>
        .app{
            background-color: 'black';
        }
        .title{
            background-color: 'green';
        }
        </style>
    </head>

    <body>
        <div class = "app">
        </div>

        <script>
            var app = document.querySelector('.app')
            var title = document.createElement('div')
            title.className = 'title'
            title.innerHTML = "BREAKING NEWS"
            app.appendChild(title);
        </script>
    </body>
</html>

Answer 1

JavaScript 完美运行。这是您的 JS 的结果：

<div class="app">
  <div class="title">BREAKING NEWS</div>
</div>

但是，您的 CSS 有一个小问题。 不要引用 CSS 个值！。应该是：

.app{
    background-color: black;
}
.title{
    background-color: green;
}

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset = "utf-8">
  <meta name = "description" content = "Field v.1">
  <title> Field v.1 </title>

  <style>
  .app{
   background-color: black;
  }
  .title{
   background-color: green;
  }
  </style>
 </head>

 <body>
  <div class = "app">
  </div>

  <script>
   var app = document.querySelector('.app')
   var title = document.createElement('div')
   title.className = 'title'
   title.innerHTML = "BREAKING NEWS"
   app.appendChild(title);
  </script>
 </body>
</html>

Answer 2

你的JS代码没有问题。您可以在此 Codepen 中查看您的工作代码：

https://codepen.io/kmpkt/pen/bvYwpm

但是您的 CSS 代码有错误。 CSS 值不能被引用：

background-color: black;

使用 JS 在 DOM 中创建元素

creating elements inside of DOM with JS

html

javascript

appendchild