Используя Element.insertAdjacent HTML, чтобы добавить 'Blocks' из HTML

Question

Я пытаюсь вставить следующий 'блок' из HTML, используя Element.insertAdjacent HTML ()

<div class="content-wrapper">
  <ul>
   <li class="go-back-environment">
    <a href="/environment">
     <p>Back to Environment</p>
    </a>
   </li>
   <li class="back-home">
    <a href="/home">
     <p>Back to home</p>
    </a>
  </li>
 </ul>
</div> 

Однако я не уверен в этом можно добавить div с классами и списками. Я пытался найти (безуспешно) статьи с примерами, в которых было добавлено более одного «p» или «span». Я начал со следующего, но не знаю, как продолжить сборку:

var footer = document.getElementById ('environment'); footer.insertAdjacent HTML ('afterend', '')

Я попробовал следующее:

 <script>
    var footer = document.getElementById ('environment');
    footer.insertAdjacentHTML('afterend', 
    '<div class="content-wrapper">
      <ul>
       <li class="go-back-environment">
        <a href="/environment">
         <p>Back to Environment</p>
        </a>
       </li>
       <li class="back-home">
        <a href="/home">
         <p>Back to home</p>
        </a>
      </li>
     </ul>
    </div> ');
  </script>

Возможно ли это вообще?

Спасибо!

Answer 1

Да, это так. Попробуйте использовать шаблонные литералы для более длинных html строк:

var footer = document.getElementById('footer');

var html = `
<div class="content-wrapper">
  <ul>
   <li class="go-back-environment">
    <a href="/environment">
     <p>Back to Environment</p>
    </a>
   </li>
   <li class="back-home">
    <a href="/home">
     <p>Back to home</p>
    </a>
  </li>
 </ul>
</div> 
`;

footer.insertAdjacentHTML('afterend', html);

<main>Main</main>
<footer id="footer">Footer</footer>

Answer 2

Похоже, вы допустили ошибку в строке

Проверьте это

var footer = document.getElementById('environment');

var appendHtml = ['<div class="content-wrapper">',
    '<ul>',
    '<li class = "go-back-environment">',
    '<a href = "/environment">',
    '<p> Back to Environment </p>',
    '</a>',
    '</li>',
    '<li class = "back-home">',
    '<a href = "/home">',
    '<p> Back to home </p>',
    '</a>',
    '</li>',
    '</ul>', 
    '</div>'].join("");
footer.insertAdjacentHTML('afterend', appendHtml);

<div id=environment>Footer Div</div>