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

        })
    }
});

Answer 2

基于this answer，当您在包含的页面内直接回显时，可以使用反引号（`）在js中正确包装多行字符串。

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

Answer 3

此脚本无法执行，因为您的PHP文件有多行。多行将使您的JS语法错误。

你需要在隐藏的脚本中包含这个php文件，并使用jQuery来获取这个div内容并附加到正文中。

正如@Hyder B所说，你需要在文档准备就绪时执行此脚本。

您可以尝试这种方式：

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

Answer 4

试试这个：

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

在jquery中附加元素

4 个答案: