新手求助：无法使用JS在DOM的div.app中添加div.title元素

嘿，别不好意思问基础问题——每个开发者都是从这些小问题起步的！我来帮你搞定这个需求，顺便梳理几种常见的实现方式，还会纠正代码里的小细节。

首先先提个小问题：你CSS里的背景色值不需要加单引号，比如background-color: 'black';应该改成background-color: black;（或者用#000这种十六进制写法），不然浏览器可能没法正确识别这个样式哦。

接下来是JS部分的实现，给你两种常用方法：

方法一：用createElement+appendChild（推荐，更灵活） #

这是标准的DOM操作方式，适合后续还要对新元素做更多处理的场景：

<!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; /* 去掉多余的单引号 */
            padding: 10px; /* 加内边距方便看到title元素 */
        }
        .title{
            background-color: green;
            padding: 5px;
            color: white; /* 加文字颜色方便查看 */
        }
    </style>
</head>
<body>
    <div class="app"></div>
    <script>
        // 1. 获取class为app的元素
        const app = document.querySelector('.app');
        // 2. 创建新的div元素
        const titleDiv = document.createElement('div');
        // 3. 给新元素添加title类
        titleDiv.classList.add('title');
        // 可选：给title元素加内容
        titleDiv.textContent = '这是标题';
        // 4. 将新元素添加到app内部
        app.appendChild(titleDiv);
    </script>
</body>
</html>

方法二：用innerHTML（更简洁，适合快速插入静态内容） #

如果只是简单插入元素，也可以直接用innerHTML拼接HTML字符串：

<!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;
            padding: 10px;
        }
        .title{
            background-color: green;
            padding: 5px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="app"></div>
    <script>
        const app = document.querySelector('.app');
        // 直接插入HTML内容到app内部
        app.innerHTML = '<div class="title">这是标题</div>';
        // 要是不想覆盖app原有内容，就用+=：app.innerHTML += '<div class="title">...</div>';
    </script>
</body>
</html>

小补充： #

• document.querySelector('.app')是获取页面中第一个class为app的元素，如果有多个，你可以用document.querySelectorAll('.app')拿到所有，再遍历操作。
• classList.add('title')是给元素加类的标准方法，也可以用titleDiv.className = 'title'，但classList更灵活——比如可以一次性加多个类、判断类是否存在、移除类等等。

内容的提问来源于stack exchange，提问作者Alexander