如何在整个 .html() 中发送多个 jquery 对象？

Question

当我使用 jquery .html() 时，我知道我可以使用它发送 jquery 对象，但是当我发送多个对象时，输出变为“[object Object]”。我做了一些解决方法，但无法解决问题..

这是脚本

    $('.kim2').on('click', function(){
        var ok = $(this).next();
        var trunk = "hmm";
        console.log(ok);
        $('#content').html(function(){
            return ok + trunk;
        });
    });

html：

            <div class="kim2">피의자 상황</div>
              <div id="b"class="kim2b">
                <div id="b1" class="kim2bb">부양가족 <br />과도한 곤경</div>
                <div id="b2" class="kim2bb">건강상태 매우 <br />나쁨</div>
                <div id="b3" class="kim2bb">고령</div>
                <div id="b4" class="kim2bb">사회적<br /> 유대관계 분명</div>
                <div id="b5" class="kim2bb">사회적 <br />유대관계 결여</div>
                <div id="b6" class="kim2bb">약물중독 <br />알코올 중독</div>
                <div id="b7" class="kim2bb">해당없음</div>
              </div>

当我从返回语句中删除树干时，它工作得很好，但是当我添加一些其他对象时，它就变成了上面提到的那样。

我想发送尽可能多的对象，并带有一些变化。怎么样？

Answer 1

问题是您试图将两个对象连接为字符串。它们不是字符串，因此如果不先将它们转换为字符串，它将无法工作。

最好的方法实际上是使用 jQuery 函数来empty() 任何现有内容，然后将append() 两个对象中的每一个都添加到您的容器中。

像这样：

    $('#content').empty().append(ok, trunk);

甚至：

    $('#content').empty().append(ok, "hmm");

---

您在使用它时可能遇到的一个潜在问题是，#b div 已从其原始位置移除并移动到内容中，而不是复制 .

这里的问题是，如果您要附加的元素已经在 DOM 中，它将被移动到新位置，而不是复制。来自文档：

如果以这种方式选择的元素被插入到 DOM 中其他位置的单个位置，它将被移动到目标中（未克隆）：

要解决此问题，您需要自己 clone() 对象，并附加克隆而不是原始对象：

$('.kim2').on('click', function(){
    var okCopy = $(this).next().clone();
    console.log(okCopy);
    $('#content').empty().append(okCopy, "hmm");
});

Answer 2

$('#content').html(ok.html() + trunk);

如果您需要正常的外部 HTML，请使用：

$('#content').html(ok[0].outerHTML + trunk);