jquery - 在 html 页面内加载动态内容

Question

我刚刚在 .js 页面中创建了一个 footer 内容，现在我需要为页面中的类附加该内容，但动态创建的页脚中存在一些语法错误。我不知道如何动态创建它。
请问有什么建议吗？

$(document).ready(function(){
    var footer="<footer class='subFooter col-lg-12 col-md-12'>"
        "<div class='col-lg-12 col-md-12' style='padding-top:35px;'>"
            "<p style='display:inline;color:#fff'>@ xxxxx Limited</p>"
            "<img src='images/aaa.png'  class='pull-right'>"    
            "<img src='images/bbb.png'  class='pull-right'>"    
        "</div>"
    </footer>";
    $('#footer').append(footer);
});

我只需在#footer中加载此页脚

Answer 1

您必须连接这些字符串(在行末尾添加 + 字符，并在 </footer> 结束之前添加缺少的引号):

$(document).ready(function() {
  var footer = "<footer class='subFooter col-lg-12 col-md-12'>" +
     "<div class='col-lg-12 col-md-12' style='padding-top:35px;'>" +
       "<p style='display:inline;color:#fff'>@ 2023 by Camion Ligistics Limited</p>" +
       "<img src='images/Artboard 21 copy.png' id='twitterIcon' class='pull-right'>" +
       "<img src='images/Artboard 21.png' id='fbIcon' class='pull-right'>" +
     "</div>" +
    "</footer>";
  $('#footer').append(footer);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footer"></div>

如果您有多个footer如果您想使用类而不是 id:

 <div class="footer"></div>

然后在 JavaScript 端:

 $(".footer").append(...);