Сложность использования методов HTML DOM .createElement (), .setAttributeNode () и .appendChild () - PullRequest
Новая
       0

Сложность использования методов HTML DOM .createElement (), .setAttributeNode () и .appendChild ()

0 голосов
/ 17 января 2019

Я учусь разрабатывать динамическую веб-страницу и пытаюсь использовать HTML DOM для добавления объектов JS, но после нескольких попыток устранения неполадок ничего не появляется.

Я пытался использовать .createAttribute () вместо .setAttribute () и внимательно прочитал описания всех методов, чтобы убедиться, что я использовал их правильно. 

<html>
    <body>
        <div id="greeting_section">
        </div>
    <script>
        let greeting_post = document.createElement("P");
        greeting_post = document.setAttributeNode("id","post");
        let greeting_post_text = document.createTextNode("howdy howdy");
        greeting_post.appendChild(greeting_post_text);
        document.getElementById("greeting_section").appendChild(greeting_post);        
    </script>   
    </body>
</html>

Я ожидаю, что он выведет "приветик", но в моем браузере Firefox ничего не появляется.

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Первое: когда я запускал ваш код, консоль браузера показала эту ошибку

Uncaught TypeError: document.setAttributeNode не является функцией

Это первое, что вы должны сделать, когда ваш код не работает, посмотрите на консоль браузера.

Второе: в вашем коде greeting_post = document.setAttributeNode("id","post"); вы пытаетесь добавить id="post" к greeting_post переменной, которая является тэгом p, если вы делаете это неправильно, Ваш код означает изменение переменной greeting_post на новое значение document.setAttributeNode("id","post"); что означает Установить атрибут id = "post" для документа . Итак, вместо вашего кода правильный код должен выглядеть следующим образом: 

greeting_post.setAttribute("id","post");

На английском это означает, выберите greeting_post и установите его атрибут на id="post"

Итак, финал, полный код должен быть таким: 

let greeting_post = document.createElement("P"),
    greeting_post_text = document.createTextNode("howdy howdy");

greeting_post.setAttribute("id","post");
greeting_post.appendChild(greeting_post_text);
document.getElementById("greeting_section").appendChild(greeting_post);
0 голосов
/ 17 января 2019

Похоже, вы перезаписываете greeting_post. Кроме того, вы можете просто использовать setAttribute вместо setAttributeNode. Ниже приведен рабочий пример. 

let greeting_post = document.createElement("P");
greeting_post.setAttribute("id","post");
let greeting_post_text = document.createTextNode("howdy howdy");
greeting_post.appendChild(greeting_post_text);
document.getElementById("greeting_section").appendChild(greeting_post);
<html>
    <body>
        <div id="greeting_section">
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...