load dynamic content inside of the html page

Question

I just created one footer content in .js page now I need to append that content for a class in a page,But some syntax error in dynamically created footer.I dont know how to create it dynamically.
Please any sugesstion?

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

This footer only I need to load in #footer

you're not concatenating the strings "<footer> ...." + "<div> ...." — Ovidiu Dolha
– Ovidiu Dolha, Commented May 30, 2017 at 12:47

Ionică Bizău · Accepted Answer · 2017-05-30 13:11:02Z

3

You have to concatenate these strings (added the + characters at the end of the lines and the missing quotes before the </footer> closing):

$(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>

If you have multiple footers you want to use a class instead of an id:

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

And then in the JavaScript side:

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

edited May 30, 2017 at 13:11

answered May 30, 2017 at 12:48

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ionică Bizău Over a year ago

@AlivetoDie Thanks! :)

krish Over a year ago

Heh thanks.But, am using #footer 5places in my code,its appending only once.

krish Over a year ago

its a nav-tabs..for each tab i need to load that footer.what to do?

Death-is-the-real-truth Over a year ago

@krish your tabs will open new pages?

krish Over a year ago

no complete code is in a single page only.. i have used multiple div.Using id am loading the div.For each tab separate div.

|

Death-is-the-real-truth · Accepted Answer · 2017-05-30 12:49:37Z

1

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>";

edited May 30, 2017 at 12:49

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

answered May 30, 2017 at 12:48

tech2017

1,8061 gold badge13 silver badges15 bronze badges

Comments

Milan Chheda · Accepted Answer · 2017-05-30 12:50:47Z

Here is the working code. Your code had double quotes which are not needed. Instead have the entire HTML in one-line. If you take them in next line with double quotes than you need to append those with + sign.

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

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

Ovidiu Dolha · Accepted Answer · 2017-05-30 12:55:57Z

1

Alternatively, if you can use ES6, you can use the multi-line string approach, for better clarity:

$(document).ready(() => {
  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);
});

This also allows you to use double quotes for more familiar html.

edited May 30, 2017 at 12:55

answered May 30, 2017 at 12:50

Ovidiu Dolha

5,4132 gold badges24 silver badges31 bronze badges

Collectives™ on Stack Overflow

load dynamic content inside of the html page

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related