0

我正在尝试使用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>

甚至可能吗？

谢谢 ！

4

2 回答 2

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>

于 2020-04-07T08:46:52.013 回答
0

看起来你在字符串中犯了一些错误

检查这个

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>

于 2020-04-07T08:52:49.703 回答