HTML Academy
The CreateElement method and creating an element
Conditions and creating elements11/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
Add a comment when submitting the form
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Adding an element to the page

Great! We created a new list item using JavaScript and displayed it in the console. But the new element did not appear on the page. This is because JavaScript does not know where to place it. Until we tell it, the new element will be accessible from the script, but it will not appear.

To indicate where the new element should be located, we will use the append method, which we are already familiar with:

// Create a new element
let newElement = document.createElement('div');

// Find the parent element
let parent = document.querySelector('.parent');

// Add a new element to the end of the parent element
parent.append(newElement);

The new comments should be added to the end of the comment section on the news site. Here’s what happens when we add the created element:

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

<!-- Markup in the browser after commentList.append(newComment) -->
<ol class="comment-list">
  <li class="user-comment">Hmmm, it's some kind of nonsense…</li>
  <li></li>
</ol>

The append method does not copy the elements. Rather, it moves them. If you indicate an element in parentheses that is already in the markup, then this element will disappear from its previous place and appear in the place that the append method added it to. This method will not work for obtaining several elements.

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'); commentForm.onsubmit = function (evt) { evt.preventDefault(); }; let newComment = document.createElement('li'); console.log(newComment);
    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 console output on the last line.
      2. On the same line, write an instruction that adds the newComment element to the end of the comment section.
        Note that the created element has now appeared on the page.

      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.