javascript - 获取外部内容(相同域)并将其插入到特殊的 div 中(无需替换)

Question

我有两个 php 文件(同一域):

main.php
test.php

main.php的结构

<div class="box">Hello:</div>

test.php的结构

<div class="names">
  <span>Andy</span>
  <span>Sandra</span>
</div>
<div class="colors">
  <span>Blue</span>
  <span>Blue</span>
</div>

现在我想在“main.php”的“box”div内的“test.php”中的内容“Hello:”之后插入“names”的内容。

我尝试这样的事情:

$( ".box" ).load( "http://website.com/test.php .names" );

但是“加载”似乎正在取代内容？

所以我尝试$.get:

$.get( "http://website.com/test.php .names", function( data ) {
  $( ".box" ).html( data );
});

但是“$.get”忽略了我的类名，并且还完全“替换”了内容。

我的失败是什么？

Answer 1

您可以使用如下所示的类

<div class="names">
  <span>Andy</span>
  <span>Sandra</span>
</div>

然后使用下面的脚本

$( ".box" ).append($("<div>").load("http://website.com/test.php .names"));

编辑:你也可以用ajax以不同的方式做到这一点

$.ajax({
    url: 'http://website.com/test.php',
    dataType: 'html',
    success: function(html) {
        var div = $('.names', $(html));
        $(".box").append(div);
    }
});