使用Element.insertAdjacentHTML添加'；区块'；HTML格式

我试图使用元素插入以下HTML“块”。insertAdjacentHTML（）

但是，我不确定是否可以添加带有类和列表的div。我一直试图找到（没有成功）文章中添加了多个“p”或“span”的例子。 我从以下内容开始，但我不知道如何继续构建：

var footer=document.getElementById（'environment'）； 页脚.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>

var footer=document.getElementById（'environment'）；
页脚.insertAdjacentHTML（'afterend'，
'






');

有可能吗

谢谢

是的。请尝试对更长的html字符串使用：

var footer=document.getElementById（'footer'）；
变量html=`






`;
footer.insertAdjacentHTML（'afterend'，html）
Main
页脚
看起来您在字符串中犯了一些错误

检查一下这个


var footer=document.getElementById（'environment'）；
var appendHtml=[''，
“
”，
“
”，
'',
“
”，
“
”，
'',
“
”，
“
”，
''）。加入（“”）；
footer.insertAdjacentHTML（'afterend'，appendHtml）
Footer Div
当您使用此选项时会遇到什么问题，在上面的示例中，您使用变量
Footer
，而不是使用
环境
变量，这是错误的。嘿！好地方。少了一个需要解决的错误：）接下来的问题是如何添加我想添加的HTML：sHi Daniel！成功了！：）我想问这些类是否会将应用于External CSS文件的样式引入其中，但似乎确实如此！谢谢你的帮助。你好@DanielSixl！我还有一个问题。因此，这个脚本在html文件中编写时可以工作。我已经创建了一个“全局JS”文件来承载脚本，然后链接到我的HTML。但是脚本似乎不是这样触发的。你以前做过这个吗？我可能链接错误。谢谢好吧，没关系。检查脚本的链接–这是一个非常常见的错误源，很容易出错。但是，您可能不应该使用全局脚本。您的目标元素可能不存在于每个页面上（但您可以检查是否存在）。或者，您可能不希望在每个页面上都添加列表。
 <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>