使用 Element.insertAdjacentHTML 添加 'Blocks' 共 HTML

Question

我正在尝试使用 Element.insertAdjacentHTML()

插入以下 'block' of 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.insertAdjacentHTML('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

是的，是的。尝试使用 template literals 以获得更长的 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>

使用 Element.insertAdjacentHTML 添加 'Blocks' 共 HTML

Using Element.insertAdjacentHTML to add 'Blocks' of HTML

html

inserthtml