Question

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

$(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(...);

Answer 2

<div ng-controller="currentTaskTabCtrl">
  <table>
    <thead>
      <tr>
        <th> # </th>
        <th> Task Name </th>
        <th> Estimated Hours </th>
        <th> Time Remaining </th>
        <th> Start Date </th>
        <th> Stop Date </th>
        <th> Actual Time </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="task in data">
        <td></td>
        <td>{{task.task_name}}</td>
        <td>{{task.estimated_hours}}</td>
        <td>{{task.time_remaining}}</td>
        <td>{{task.start_date}}</td>
        <td>{{task.stop_date}}</td>
        <td>{{task.actual_time}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

这是工作代码。您的代码有双引号，不需要。而是将整个HTML放在一行中。如果你使用双引号将它们带到下一行，那么你需要附加+符号。

＆＃13;

nextProps

＆＃13;

$(document).ready(function() {
  var footerHTML = "<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').html(footerHTML);
});

＆＃13;

Answer 4

或者，如果你可以使用ES6 ，你可以使用多行字符串方法，以便更清晰：

richTextBox1.Text += $" {item}";

这也允许您使用双引号来获得更熟悉的html。

加载html页面内的动态内容

4 个答案: