CODEWITHSUNDEEP
jquery
Shadow_boi
Shadow_boi

Reputation: 2198

jquery cant append a string to an object

what I want to do is:

Wrap a link around $feedbodyimage.eq(0), then append the whole thing into $feedbodycontainer.

But it is not working. The output is [object object].

Please help

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.

    }

Upvotes: 0

Views: 511

Answers (4)

Zak Henry
Zak Henry

Reputation: 2185

Use the jQuery wrap function something like this:

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

Try this fiddle here showing it working http://jsfiddle.net/BLsFz/

Upvotes: 0

user1106925
user1106925

Reputation:

Adding this as a separate answer.

My other answer shows the problem and a workaround, but really you should be doing it differently from the start.

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);
}

If you wanted a copy of the image instead of the original, change this...

.append($feedbodyimage.eq(0))

to this...

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

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

While building the html string you should use the html method to get its html. Since html method will give the inner html you should get the outer html. OuterHTML is not supported by all the browser so there is a work around to it. Try this

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

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

Upvotes: 0

user1106925
user1106925

Reputation:

This is because a jQuery object is not HTML, and a native DOM element is not HTML.

HTML is HTML. So if you wanted to concatenate it in, you'd need to get it as HTML.

var HTML = $feedbodyimage[0].outerHTML;

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

So [0] gets the native DOM element at index 0, and outerHTML renders it and its content as an HTML string.

Note that .outerHTML isn't supported by FireFox, but support is coming.

Here's a possible patch for outerHTML...

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

...to which you would pass a DOM element, and it would return the HTML string...

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

Upvotes: 2

Related Questions