Не получается вывести на страницу блок отформатированных тэгов html, созданный функцией js

Question

Функция createHtml не выводит на страницу блок div с содержимым. Не могу понять, почему. Сама функция, как-будто, работает, то есть результат ее работы в переменной сохраняется. Помогите, пожалуйста разобраться. Код страницы:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> Insert of HTML</title>


  </head>
  <body>

    <div class-"wrapper">
       <div class="for_insert"></div>      
    </div>

    <script>

      function createHtml() {

        return( 
          ` 
            <div>
              <h2>Заголовок</h2>
              <p>Абзац</p>
            </div>
          `
         ); // end return
      } // end createHtml

      var varCreateHtml = createHtml(); 
      document.getElementById("for_insert").innerHTML = varCreateHtml;  

    </script>

  </body>
</html>

Answer 1

В тэге div class="for_insert" надо поменять class на id, то есть тэг будет выглядеть так: div id="for_insert". Слово class - ключевое в javascript

Answer 2

Ты запрашиваешь элемент через getElementById

document.getElementById("for_insert")

Когда в html у тебя нету ида а есть только класс: <div class="for_insert"></div>

Поменяй на: <div id="for_insert"></div>

Answer 3

function createHtml() {
  return (` 
    <div>
      <h2>Заголовок</h2>
      <p>Абзац</p>
    </div>
  `);
}

const createHtmlVariable = createHtml();
document.querySelector('.for_insert').innerHTML = createHtmlVariable;

<div class="wrapper">
  <div class="for_insert"></div>
</div>

БЛОГ НА HUSL

Не получается вывести на страницу блок отформатированных тэгов html, созданный функцией js

Ответы (3 шт):