时间戳

首页 > 解决方案 > 使用 Element.insertAdjacentHTML 添加 HTML 的“块”

html - 使用 Element.insertAdjacentHTML 添加 HTML 的“块”

问题描述

我正在尝试使用Element.insertAdjacentHTML()插入以下 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 ('环境'); 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>

甚至可能吗？

谢谢 ！

标签： htmlinserthtml

解决方案

是的。尝试对更长的 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>

推荐阅读