javascript - jquery 中追加元素

Question

我正在尝试将一个 div 附加到其他 div 中:

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

变成:

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

我在这里做错了什么？由于双引号或单引号，我觉得有问题。为什么它不起作用？

Answer 1

更新我原来的答案:

首先，您需要将代码包装在 document.ready() 中。当 dom 准备好时它应该追加。

其次，它不起作用，因为您输出的 HTML 位于多行中。如果您查看控制台，您会看到以下错误:

Uncaught SyntaxError: Invalid or unexpected token

解决这个问题的方法有很多，最简单的就是使用 template literals ，这意味着您应该将代码括在反引号内。

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

但是，此解决方案可能不兼容所有浏览器，因为此功能已在 ES6 中引入。

更好的方法是通过 ajax 调用 sidebar.php。

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

        })
    }
});