Question

我在将json数组发送到我的jquery脚本时遇到问题，我想将它附加到div。在php中我创建了一个包含以下html代码的json数组：

<li id="1234">
   <span class="some">$1</span>
   <span class="some2">$1</span>
   <div class="somediv"></div>
</li>

所以整个json数组看起来像这样：

[{"id":"12435","text":"<li id=\"1234\"><span class=\"some\">$1</span>"},{"id":"13542","text":"<span class=\"some2\">$1</span><div class=\"somediv\"></div></li>"}];

现在我使用getJSON获取json对象，然后将结果追加到这样的div：$(".container").append(val);

现在的问题是，在尝试附加JSON结果时，不知何故，这就是附加内容：

<li id="1234">
   <span class="some">$1</span>
</li>
<li id="1234">
   <span class="some2">$1</span>
   <div class="somediv"></div>
</li>

当我尝试使用val输出alert(val)时，它会清楚地显示json结果是正确的（没有结束<li>标记），但在附加{{1}时标签已添加。

有谁知道这可能是什么原因？

这是我从我的php文件中获取值的方法：

<li>

Answer 1

jQuery正在附加HTML，但是你传递的是部分HTML块。尝试将所有HTML连接成一个值，然后附加它。

Answer 2

jQuery方法需要完整的dom节点。 jQuery方法被设计为仅从半写标签自动创建元素，因此这可能不像您希望的那样容易。

一种替代方法是在JavaScript中构建字符串并在完成时追加。或者，您可以使用vanilla JavaScript执行此操作。我会对此发出警告，因为任何错误都可能使页面处于恶劣的状态。

Answer 3

目前，你的html标签在第二个数组中关闭。因此，您必须将所有收集的html存储到var中，然后再附加它。

var html = '';

$.each(obj[key], function(key, dval)
{
    if(key == "text")
    {
        alert(dval);
        html += dval;
    }
});

$('.container').append(html);

Answer 4

你试过这个吗？

$(".container").html(val);

为什么我的JQuery脚本在追加时添加了html标签？

4 个答案: