Annoying problem with a simple bit of jQuery, moving a link

[evu]

Hi,

This is hella annoying, can not figure out or Google as to why it’s not working.

Basically, I want to move a link. Except when I do, if I try to wrap it in another div it doesn’t return as a link, instead it’s an [object Object]….

See pen: http://cdpn.io/AKnsL

If I remove the divs surrounding it, it works fine… But, this is a simplified version of a lot of things I want to move around with jQuery.

Help would be uber,
Thanks.

[Paulie_D]

a lot of things I want to move around with jQuery.

Why?

Wouldn’t just changing the mark-up be easier?

I think you’re solving the wrong problem.

[evu]

It’s a test case Paulie, and I don’t have access to the markup. Things would be much simpler if I did that’s for sure!

[Paulie_D]

Jquery needs to know what to move and how.

So, to start with you need to ascertain how the element is positioned and then determine how you want to move it.

The trouble is that, without knowing what precisely you are trying to do, “moving” the element (which might different from “re-positioning” it) could cause knock on effects for the other elements in the DOM

[dyr]

Paulie_D is right. It’s not possible for us to advise you without knowing exactly the context in which this solution is needed.

Read http://api.jquery.com/after/ – specifically what you can pass into it. The docs say “HTML string, DOM element, array of elements, or jQuery object”. In your code you’re actually adding the string '<div>' to a jQuery object which does not work the way you think it does.

You could use: $('div').append( '<div>' + link.prop( 'outerHTML' ) + '</div>' ); which converts the jQuery object link to a string representation of it’s HTML but a better approach is to avoid strings when building your new object.

Instead you could use jQuery to create the new div like this:

var link = $( 'a' );
var newEl = $( '<div />' ).append( link );  // creates a new div and appends the anchor as a child, the new div isn't added to the page yet
$( 'div' ).append( newEl ); // append the new element to an existing DOM node

Cheers

[evu]

Yeah I found out that passing an object alone into after is fine because jQuery is smart enough to know how to deal with an object. But passing an object + string jQuery assumes I want a string so does it’s best to convert the object into a string. Makes sense.

I’ve figured out how to do it now, creating new elements and appending to them and then appending those to whatever else, just as you illustrated dyr :)

Thanks for the help!

[Author]

Posts