为什么我的 JQuery 脚本在附加时会添加 html 标签？答案

【问题标题】：Why does my JQuery script add html tags when appending it?为什么我的 JQuery 脚本在附加时会添加 html 标签？
【发布时间】：2012-12-04 22:00:12
【问题描述】：

将 json 数组发送到我想将其附加到 div 的 jquery 脚本时遇到问题。在 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>

当我尝试用alert(val) 输出我的val 时，它清楚地表明json 结果是正确的（没有结束<li> 标记），但是在附加它时，添加了<li> 标记。

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

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

$.getJSON("../ajax.php?action=getresults", function(data)
        {
            var obj = $.parseJSON(data);

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

            });         

        });

【问题讨论】：

向我们展示您是如何获取值的，假设您不只是将 JSON 字符串“按原样”附加到页面？
.append() 需要有效的 HTML，而不仅仅是片段。
你使用的是$.getJSON，你不需要$.parseJSON。
那么除了append()之外还有其他功能可以追加HTML片段吗？
因为我想要在我的ul 中添加新的li 元素，但在特定位置（例如ID 为3 的li 元素后面。所以追加可能是错误的函数，因为它会将li 元素放入另一个li 元素中。

标签： php jquery html json

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

另一种方法是在 JavaScript 中构建字符串并在完成时追加。或者，您可以使用 vanilla JavaScript 执行此操作。不过我会警告不要这样做，因为任何错误都可能使页面处于令人讨厌的状态。

【讨论】：

【解决方案3】：

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

var html = '';

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

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

【讨论】：

唯一的问题是，如果我希望每个 dval 位于不同的位置，我该怎么办？在我的情况下，键是它应该附加到的 html ID 的名称。但在这个例子中，我只能将整个内容附加到我的容器中。

【解决方案4】：

你试过了吗？

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

【讨论】：

我要追加内容，现有内容不要替换