Question

下面的代码应该在我的文档中添加一个p元素，在该元素中添加文本，并将该元素的字体颜色更改为red。

这是一堂课。我已经为此工作了两个小时，但被困住了。

<!DOCTYPE html>
<html>

    <body>

      <h1 id='demo'>
        THE TITLE OF YOUR WEBPAGE
      </h1>
      <div id="container">
        <div class="content">
          This is the glorious text-content!
        </div>
      </div>


    </body>
    <script>
    const p = document.createElement('p');
    p.textContent = 'Hey, I'm red.';
    p.style.color = 'red';
    div.content.appendChild('p');

    </script>

</html>

该代码无法产生预期的结果。你们中的任何一个都可以帮助我了解我所缺少的吗？

Answer 1

您的代码中几乎没有问题：

您正在使用的 textContent （'Hey, I'm red.'）无效。

您可以使用双引号将整个字符串括起来，以便可以在字符串内使用单引号，例如"Hey, I'm red."。

或：，您可以使用\之类的反斜杠（'Hey, I\'m red.'）对内引号进行转义

OR：：您可以使用Template Literals用反斜杠包装字符串，例如：
```
`Hey, I'm red.`
```
您必须使用document.getElementById()来定位元素。
您还必须删除appendChild('p')中变量 p 的引号，否则将引号视为 string 而不是变量：

const p = document.createElement('p');
p.textContent = "Hey, I'm red.";
p.style.color = 'red';
document.getElementById('container').appendChild(p);

<h1 id='demo'>
  THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container">
  <div class="content">
    This is the glorious text-content!
  </div>
</div>

Answer 2

在'Hey, I'm red.';处，您需要使用反斜杠对'm之前的引号进行转义，否则您可以在双引号内放上双引号。

在div.content.appendChild('p');旁边的div需要成为一个目标，您可以使用document.getElementById和在appendChild内获取公交车，您需要将p作为变量传递

const p = document.createElement('p');
p.textContent = 'Hey, I\'m red.';
p.style.color = 'red';
document.getElementById('container').appendChild(p);

<h1 id='demo'>
  THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container">
  <div class="content">
    This is the glorious text-content!
  </div>
</div>

使用JavaScript处理DOM

2 个答案: