Question

我想做的是：

绕过$feedbodyimage.eq(0)的链接，然后将整个内容附加到$feedbodycontainer。

但它不起作用。输出为[object object]。

请帮忙

var $feedbodycontainer = $("<div class='feedbody'></div>");
var $feedbodyimage = $feedbody.find("img");

    if($feedbodyimage.length) {

        $feedbodycontainer.append($feedbodyimage.eq(0));// it works
             //$feedbodycontainer.append("<a href='"+feedlink+"' target='_blank'>"+$feedbodyimage.eq(0)+"</a>";) // it doen't work. output is [object object] hyperlinked.

    }

Answer 1

这是因为jQuery对象不是HTML，而本机DOM元素不是HTML。

HTML是HTML。因此，如果您想将其连接起来，则需要将其作为HTML。

var HTML = $feedbodyimage[0].outerHTML;

$feedbodycontainer.append("<a href='"+feedlink+"' target='_blank'>"+ HTML +"</a>");

因此[0]获取索引0的本机DOM元素，outerHTML将其及其内容呈现为HTML字符串。

请注意，FireFox不支持.outerHTML，但支持即将到来。

这是outerHTML ...

的可能补丁

function outerHTML( el ) {
    return el.outerHTML || 
           document.createElement('div')
                   .appendChild(el.cloneNode(true)) 
                   .parentNode.innerHTML;
}

...你将传递一个DOM元素，它将返回HTML字符串......

var HTML = outerHTML( $feedbodyimage[0] );

Answer 2

将此作为单独的答案添加。

我的另一个答案显示了问题和解决方法，但实际上你应该从一开始就采用不同的方式。

var $feedbodycontainer = $("<div class='feedbody'></div>");
var $feedbodyimage = $feedbody.find("img");

if($feedbodyimage.length) {

      // Create the <a> element, append the <img> to the <a>, 
      //   and append the <a> to the container.
   $("<a>",{href:feedlink, target:"_blank"})
       .append($feedbodyimage.eq(0))
       .appendTo($feedbodycontainer);
}

如果您想要图像的副本而不是原始图像的副本，请更改此...

.append($feedbodyimage.eq(0))

到此......

.append($feedbodyimage.eq(0).clone(true))

Answer 3

在构建html字符串时，您应该使用html方法获取其html。由于html方法将给出内部html，你应该得到外部html。所有浏览器都不支持OuterHTML，因此有一个解决方法。试试这个

var html = ($feedbodyimage.get(0).outerHTML || 
             $feedbodyimage.eq(0).clone(true).wrap('<div />').parent().html());

$feedbodycontainer.append("<a href='" + feedlink + "' target='_blank'>" 
        + html +"</a>");

Answer 4

使用jQuery wrap函数：

$feedbodyimage.eq(0).wrap('<a href="your_location" />').parent().appendTo($feedbodycontainer);

请尝试使用此小提示，显示其正常工作http://jsfiddle.net/BLsFz/

jquery无法将字符串附加到对象

4 个答案: