appending elements in jquery

Question

i am trying to append a div to other div here :

 <script>if($(window).width()>500){
            $("body").append("<?php include('includes/middle.php') ?>");
    }
    </script>

Which becomes:

<script>if($(window).width()>500){
            $("body").append("<div class='middle'>
                <div class='middleOne'>

             <a href='http://localhost/jhandwa/story/11-illustrations-that-perfectly-capture-how-life-changes-when-we-grow-up'>
               <img src='https://files.brightside.me/files/news/part_31/310360/12086810-10111660-1-0-1487765591-1487765607-0-1488442321-0-1488458395-1488458410-650-1-1488458410-650-0c369e17e2-1488484030.jpg'>
               <div class='miniTitle'>11 Illustrations That Perfectly Capture How Life Changes When We Grow Up<br /><span>2017-03-17 17:12:36</span></div>
            </a>
        </div>
               <div class='middleOne'>

             <a href='http://localhost/jhandwa/story/10-things-you-didnt-know-about-the-us-secret-service'>
               <img src='https://www.whitehouse.gov/sites/whitehouse.gov/files/images/first-family/44_barack_obama%5B1%5D.jpg'>
               <div class='miniTitle'>10 Things You Didn't Know About<br /><span>2017-03-17 15:15:29</span></div>
            </a>
        </div>
               <div class='middleOne'>

             <a href='http://localhost/jhandwa/story/who-is-actually-dumb-and-dumber-after-watching-these-crime-serials'>
               <img src='https://s-media-cache-ak0.pinimg.com/originals/36/45/e6/3645e66b26b611a30fabf923f7247d23.jpg'>
               <div class='miniTitle'>Who is Actually 'dumb' and 'dumber' after this? <br /><span>2017-02-28 00:00:00</span></div>
            </a>
        </div>

   </div>");
    }
    </script>

what am i doing wrong here? i feel its something wrong because of double or single quotes.why isn't it working?

Hyder B. · Accepted Answer · 2017-04-01T08:23:31.620

Updating my original answer:

First, you need to wrap your code in document.ready(). It should append when the dom is ready.

Second, it is not working because your outputted HTML is on multiple lines. If you look at your console, you would see the following errors:

Uncaught SyntaxError: Invalid or unexpected token

There are many ways to solve this issue, the simplest would be to use template literals, this means you should wrap your code within backtick.

$(document).ready(function () {
    if ($(window).width() > 500) {
        $("body").append(`<?php include('includes/middle.php') ?>`);
    }
});

However, this solution may not be compatible with all browsers as this feature has been introduced in ES6.

A much better way would be to call the sidebar.php via ajax.

$(document).ready(function () {
    if ($(window).width() > 500) {
        $.get("includes/middle.php", function (data, status) {
            $("body").append(data);

        })
    }
});

Glad it was helpful. An upvote to this answer would not hurt ;) — Hyder B., Apr 01 '17 at 08:44
sorry lol. accepted this ansewer coz i am new and need 15 reputations to vote lol. — Yugraaj Sandhu, Apr 01 '17 at 15:34

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

Based on this answer and as you directly echo inside the included page, you can use backtick (`) to wrap multiline string in js properly.

 <script>
 $(document).ready(function() {
     if($(window).width()>500){
         $("body").append(`<?php include('includes/middle.php'); ?>`);
     }
 });
 </script>

edited May 23 '17 at 11:46

Community

1
1

answered Apr 01 '17 at 08:09

Hossam

1,126
8
19

score 0 · Answer 3 · answered Apr 01 '17 at 08:12

This script can not execute because your PHP file have multiple line. And multiple line will make your JS syntax wrong.

You need include this php file in a hidden script, and use jQuery to get this div content and append into body.

And as @Hyder B say, you need put this script execute when document has been ready.

You can try this way:

<div id="included_content" style="display:none">
    <?php include('includes/middle.php') ?>
</div>

<script>
$(document).ready(function() {
    if($(window).width() > 500){
            $("body").append($("#included_content").html());
    }
});
</script>

score 0 · Answer 4 · answered Apr 01 '17 at 08:13

0

Try this:

if($(window).width()>500){
    $.ajax({
       url: 'includes/middle.php',
       success: function(html) {
          $("body").append(html);
       }
    });
}

answered Apr 01 '17 at 08:13

Rajesh Karunakaran

169
6

so is it not going to load when window size is smaller than 500 right? its not like display:none which stil loads right? is this way fast? – Yugraaj Sandhu Apr 01 '17 at 08:30

appending elements in jquery

4 Answers4