Управление DOM с помощью JavaScript - PullRequest
Новая
       1

Управление DOM с помощью JavaScript

0 голосов
/ 17 ноября 2018

Код ниже должен добавить элемент 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>

Код не дает желаемых результатов.Может ли кто-нибудь из вас помочь мне понять, чего мне не хватает?

Ответы [ 2 ]

0 голосов
/ 17 ноября 2018

Здесь '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>
0 голосов
/ 17 ноября 2018

В вашем коде есть несколько проблем:

  1. Используемый вами textContent ('Hey, I'm red.') недействителен.

    Вы можете использовать двойные кавычки, чтобы окружить всю строку, так что вы можете использовать одинарные кавычки внутри строки, например "Hey, I'm red.".

    ИЛИ: вы можете избежать внутреннегокавычки с обратной косой чертой (\), такие как 'Hey, I\'m red.'

    ИЛИ: Вы можете использовать Шаблонные литералы , заключающие строку в обратную галочку, как: 

    `Hey, I'm red.`

  2. Вы должны использовать document.getElementById() для нацеливания на элемент.

  3. Вы также должны удалить кавычки вокруг переменной p в appendChild('p'), в противном случае кавычки трактуют это как string not variable: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...