HTML Academy
The append method, adding content
Conditions and creating elements10/16
Back to the list of tasks
  • 1. Include the second script
  • 2. Creating a like counter
  • 3. Changing the counter value
  • 4. The classList.contains method, checking for the existence of the class
  • 5. The conditional statement if
  • 6. The else statement, alternative branches
  • 7. Change the value from the markup
  • 8. Comments for the news site
  • 9. The append method, adding content
  • 10. The CreateElement method and creating an element
  • 11. Adding an element to the page
  • 12. Add a comment when submitting the form
  • 13. Changing the properties of the created element
  • 14. Finishing the comment section
  • 15. Summary of “Conditions and creating elements”
  • 16. Test: Task list
Adding an element to the page
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The CreateElement method and creating an element

We managed to add a message to the end of the comment section and save everything that was there before that!

However, every comment in the comment section is not just a string, but rather a separate element. Before you can add it to the comment section, you need to create this element.

To create a new element, use the createElement method:

document.createElement('tag name');

To create a new element on the page where the script is included, you need to use the word document. You need to indicate the element that you want to create in quotation marks inside parentheses. For example:

// Creates a new element <div> and writes it to the variable
let newElement = document.createElement ('div');

The comment section on our page is a numbered list, and each comment is a list item. Therefore, we will create the li element:

<ol class="comment-list">
  <li class="user-comment">Hmmm, it's some kind of nonsense…</li>
</ol>

Create a new list item and test the result: tell JavaScript to output the created element to the console.

Comments

Files
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> <title>FlashNews!</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <span class="header-logo"> <img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo"> </span> <button class="theme-button" type="button">Change the theme</button> </div> </header> <main class="inner-news"> <div class="container"> <h1 class="inner-heading">🔥 What shocking news! It’s so scandalous! Such a sensation!</h1> <article class="news-full"> <img src="img/news-robot2.jpg" alt="A robot vacationing at a resort"> <div class="news-stats"> <button class="heart"><span class="likes-number"></span></button> <time datetime="2019-12-22">22 December 2019</time> </div> <p>It turns out that you don’t have to be a cat to start programming in JavaScript! Scientists have created the first robot that can write and change its own code. He immediately learned how to code websites, and he left to work as a freelancer on Bali.</p> </article> <section class="comment-feed"> <h2>Comments</h2> <ol class="comment-list"> <li class="user-comment">Hmmm, it’s some kind of nonsense…</li> </ol> <form action="https://echo.htmlacademy.ru/courses" method="post" class="comment-form"> <div class="comment-inner"> <label class="comment-label" for="comment-input">Your comment</label> <input type="text" class="comment-field" placeholder="Comment" required id="comment-input"> </div> <button class="button" type="submit">Submit</button> </form> </section> </div> </main> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <span class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews! portal logo"> </span> </div> </footer> <script src="themes.js"></script> <script src="likes.js"></script> <script src="comments.js"></script> </body> </html>
    /* News story page styles */ .comment-form { display: flex; margin-bottom: 30px; padding: 20px 12px; } .comment-inner { position: relative; flex-grow: 1; margin-right: 10px; } .comment-label { position: absolute; top: -16px; left: -9px; padding: 4px 8px; font-size: 10px; line-height: 14px; } .comment-field { width: 100%; height: 30px; padding: 0 10px; border: none; background-color: transparent; font: inherit; font-size: 14px; line-height: 30px; } .comment-field::placeholder { color: #aaaaaa; font: inherit; font-size: 14px; font-style: italic; } .comment-field:focus::placeholder { font-size: 0; } .comment-field:hover::placeholder, .comment-field:active::placeholder { opacity: 0.5; } .inner-news .inner-heading { margin-bottom: 20px; } .news-full { display: flex; flex-direction: column; margin-bottom: 24px; } .news-full img { margin-bottom: 4px; width: 100%; height: 220px; object-fit: cover; } .news-full .news-stats { display: flex; justify-content: space-between; } .news-full .heart { padding: 12px 10px; min-width: 40px; min-height: 34px; font-family: inherit; font-weight: bold; font-size: 16px; border: none; background-color: transparent; background-repeat: no-repeat; background-position: 12px; cursor: pointer; } .heart .likes-number { margin-left: 24px; line-height: 14px; } .news-full time { margin-top: 14px; margin-right: 12px; margin-bottom: 8px; margin-left: 0; } .news-full p { margin-top: 0; margin-right: 12px; margin-bottom: 16px; margin-left: 12px; font-size: 14px; line-height: 24px; } .comment-feed h2 { margin-top: 0; margin-bottom: 12px; } .comment-list { margin-top: 0; margin-right: 0; margin-bottom: 12px; margin-left: 0; padding: 0; list-style: none; counter-reset: comments; } .comment-list li { margin-bottom: 6px; padding: 10px 12px; min-height: 36px; font-size: 14px; line-height: 24px; } .comment-list .user-comment { position: relative; display: flex; } .comment-list .user-comment::before { counter-increment: comments; content: "#" counter(comments); padding-right: 12px; margin-right: 12px; border-right: 1px solid; font-weight: bold; } .comment-list .user-comment::after { position: absolute; content: ""; width: 0; height: 0; bottom: 0; left: -8px; border: 4px solid; border-left-color: transparent; border-top-color: transparent; } @keyframes comment-blink-light { 0% { background-color: #b6aaff; opacity: 0; } 20% { opacity: 0.8; } } @keyframes comment-blink-light-after { 0% { border-right-color: #b6aaff; border-bottom-color: #b6aaff; opacity: 0; } 20% { opacity: 0.8; } } @keyframes comment-blink-dark { 0% { background-color: #473c8d; opacity: 0; } 20% { opacity: 1; } } @keyframes comment-blink-dark-after { 0% { border-right-color: #473c8d; border-bottom-color: #473c8d; opacity: 0; } 20% { opacity: 1; } } /* Themes */ .dark-theme .header-logo { filter: invert(1) hue-rotate(180deg) brightness(2); } /* Light theme */ .light-theme { color: #333333; background-color: #eae9f2; } .light-theme .page-header { background-color: #ffffff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .light-theme .header-link { color: #6653d9; } .light-theme .header-link::before { background-image: url("img/arrow-back-light.svg"); background-repeat: no-repeat; background-position: 0 0; } .light-theme .theme-button { color: #6653d9; border: 1px solid #6653d9; } .light-theme .theme-button::before { background-image: url("img/moon-normal.svg"); } .light-theme .theme-button:focus, .light-theme .theme-button:hover { color: #ffffff; background-color: #6653d9; } .light-theme .theme-button:focus { outline-color: #b6aaff; } .light-theme .theme-button:focus::before, .light-theme .theme-button:hover::before { background-image: url("img/moon-hover.svg"); } .light-theme .menu-open { background-color: #ffffff; background-image: url("img/menu-open-light.svg"); } .light-theme .menu:focus { outline-color: #b6aaff; } .light-theme .menu-open:focus, .light-theme .menu-open:hover { background-color: #6653d9; background-image: url("img/menu-open-dark.svg"); } .light-theme .menu-close { background-color: #6653d9; } .light-theme .menu-close:focus, .light-theme .menu-close:hover { background-color: #473c8d; } .light-theme .main-menu { background-color: #6653d9; color: #ffffff; } .light-theme .main-menu a:focus, .light-theme .main-menu a:hover { background-color: #473c8d; } .light-theme .main-menu a:focus { outline-color: #b6aaff; } .light-theme .news-view button { border: 1px solid #6653d9; color: #6653d9; } .light-theme .news-view button:focus, .light-theme .news-view button:hover, .light-theme .news-view button:active, .light-theme .news-view .view-checked { background-color: #6653d9; color: #ffffff; } .light-theme .news-view button:focus { outline-color: #b6aaff; } .light-theme .news-view .row-view:focus::before, .light-theme .news-view .row-view:hover::before, .light-theme .news-view .row-view:active::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .news-view .tile-view:focus::before, .light-theme .news-view .tile-view:hover::before, .light-theme .news-view .tile-view:active::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .row-view::before { background-image: url("img/rows-light.svg"); } .light-theme .tile-view::before { background-image: url("img/tiles-light.svg"); } .light-theme .row-view.view-checked::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .tile-view.view-checked::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .new-block { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .news-full { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .new-block time { color: #aaaaaa; } .light-theme .news-full time { color: #aaaaaa; } .light-theme .cookies-agreement { background-color: #fdeacd; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2); } .light-theme .button { background-color: #6653d9; color: #ffffff; } .light-theme .button:focus, .light-theme .button:hover { background-color: #473c8d; } .light-theme .button:focus { outline-color: #b6aaff; } .light-theme .page-footer { background-color: #6653d9; color: #ffffff; } .light-theme .subscription, .light-theme .comment-form { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .subscription-message { background-color: #6653d9; color: #eae9f2; } .light-theme .subscription-message::before { background-image: url("img/icon-ok-light.svg"); } .light-theme .subscription-label, .light-theme .comment-label { color: #6653d9; } .light-theme .subscription-email, .light-theme .comment-field { border: 1px solid #eae9f2; color: #333333; } .light-theme .heart { color: #6653d9; background-image: url("img/icon-heart-light.svg"); opacity: 0.7; } .light-theme .heart.added { background-image: url("img/icon-heart-light-added.svg"); } .page .heart:focus, .page .heart:hover { opacity: 1; } .light-theme .heart:focus { outline-color: #b6aaff; } .light-theme .heart:active { opacity: 1; background-image: url("img/icon-heart-light-active.svg"); } .light-theme .comment-list li { background-color: #ffffff; } .light-theme .user-comment:not(:first-child) { animation: comment-blink-light 600ms ease-in; } .light-theme .user-comment::before { border-right-color: #eae9f2; color: #cdcdcd; } .light-theme .user-comment::after { border-right-color: #ffffff; border-bottom-color: #ffffff; } .light-theme .user-comment:not(:first-child)::after { animation: comment-blink-light-after 600ms ease-in; } .light-theme .comment-label { background-color: #ffffff; } .light-theme .comment-field:focus { outline-color: #b6aaff; } /* Dark theme */ .dark-theme { color: #f2f2f2; background-color: #17161a; } .dark-theme .page-header { background-color: #373540; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); } .dark-theme .header-link { color: #9484f2; } .dark-theme .header-link::before { background-image: url("img/arrow-back-dark.svg"); background-repeat: no-repeat; background-position: 0 0; } .dark-theme .theme-button { color: #9484f2; border: 1px solid #9484f2; } .dark-theme .theme-button::before { background-image: url("img/sun-normal.svg"); } .dark-theme .theme-button:focus, .dark-theme .theme-button:hover { color: #17161a; background-color: #9484f2; } .dark-theme .theme-button:focus { outline-color: #6653d9; } .dark-theme .theme-button:focus::before, .dark-theme .theme-button:hover::before { background-image: url("img/sun-hover.svg"); } .dark-theme .menu:focus { outline-color: #6653d9; } .dark-theme .menu-open { background-color: #373540; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-open:focus, .dark-theme .menu-open:hover { background-color: #473c8d; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-close { background-color: #473c8d; } .dark-theme .menu-close:focus, .dark-theme .menu-close:hover { background-color: #6653d9; } .dark-theme .main-menu { background-color: #473c8d; color: #f2f2f2; } .dark-theme .main-menu a:focus { outline-color: #6653d9; } .dark-theme .main-menu a:focus, .dark-theme .main-menu a:hover { background-color: #6653d9; } .dark-theme .news-view button { border: 1px solid #9484f2; color: #9484f2; } .dark-theme .news-view button:focus { outline-color: #6653d9; } .dark-theme .news-view button:focus, .dark-theme .news-view button:hover, .dark-theme .news-view button:active, .dark-theme .news-view .view-checked { background-color: #9484f2; color: #17161a; } .dark-theme .news-view .row-view:focus::before, .dark-theme .news-view .row-view:hover::before, .dark-theme .news-view .row-view:active::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .news-view .tile-view:focus::before, .dark-theme .news-view .tile-view:hover::before, .dark-theme .news-view .tile-view:active::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .row-view::before { background-image: url("img/rows-dark.svg"); } .dark-theme .tile-view::before { background-image: url("img/tiles-dark.svg"); } .dark-theme .row-view.view-checked::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .tile-view.view-checked::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .new-block { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .news-full { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .new-block time { color: #888888; } .dark-theme .news-full time { color: #888888; } .dark-theme .cookies-agreement { background-color: #473c8d; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .button { background-color: #9484f2; color: #17161a; } .dark-theme .button:focus { outline-color: #6653d9; } .dark-theme .button:focus, .dark-theme .button:hover { background-color: #b6aaff; } .dark-theme .page-footer { background-color: #0a0910; color: #f2f2f2; } .dark-theme .subscription, .dark-theme .comment-form { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .subscription-message { background-color: #9484f2; color: #17161a; } .dark-theme .subscription-message::before { background-image: url("img/icon-ok-dark.svg"); } .dark-theme .subscription-label, .dark-theme .comment-label { color: #9484f2; } .dark-theme .comment-label { background-color: #2a2930; } .dark-theme .subscription-email, .dark-theme .comment-field { border: 1px solid #473c8d; color: #f2f2f2; } .dark-theme .heart { color: #9484f2; background-image: url("img/icon-heart-dark.svg"); opacity: 0.7; } .dark-theme .heart:focus { outline-color: #6653d9; } .dark-theme .heart.added { background-image: url("img/icon-heart-dark-added.svg"); } .dark-theme .heart:active { opacity: 1; background-image: url("img/icon-heart-dark-active.svg"); } .dark-theme .comment-list li { background-color: #2a2930; } .dark-theme .user-comment:not(:first-child) { animation: comment-blink-dark 600ms ease-in; } .dark-theme .user-comment::before { border-right-color: #17161a; color: rgba(255, 255, 255, 0.3); } .dark-theme .user-comment::after { border-right-color: #2a2930; border-bottom-color: #2a2930; } .dark-theme .user-comment:not(:first-child)::after { animation: comment-blink-dark-after 600ms ease-in; } .dark-theme .comment-field:focus { outline-color: #6653d9; }
    let commentForm = document.querySelector('.comment-form'); let commentList = document.querySelector('.comment-list'); commentList.append('New comment'); commentForm.onsubmit = function (evt) { evt.preventDefault(); }; // Declare a variable here
    let page = document.querySelector('.page'); let themeButton = document.querySelector('.theme-button'); themeButton.onclick = function () { page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); };
    let heart = document.querySelector('.heart'); let likesNumber = document.querySelector('.likes-number'); heart.onclick = function () { if (heart.classList.contains('added')) { likesNumber.textContent--; } else { likesNumber.textContent++; } heart.classList.toggle('added'); };

    What didn’t you like in this task?

    Thanks! We’ll fix everything at once!

    The code has changed, click “Refresh” or turn autorun on.

    You’ve gone to a different page

    Click inside the mini-browser to shift the focus onto this window.

    100%
    Console
    Goalscompleted
    0
      1. Delete the code on line 3.
      2. Declare a variable newComment below the event handler and write the list item that was created using the instruction document.createElement('li') to it.
      3. On the next line output the variable newComment to the console.
      4. Open the console and make sure that the created element appears in it.

      Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

      VISAMastercard

      Log in

      or

      Forgot your password?

      Sign up

      Sign up

      or
      Log in

      Restore access

      Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

      Forgot to connect your email to the profile? Email us and we’ll help.