CODEWITHSUNDEEP
javascriptjquery
PhilD
PhilD

Reputation: 277

Moving contents between containers without innerHTML

i have a nested <ul> inside a (hidden) <aside id="idDetails>. How to make the ul move from within the aside and place it in a <div id="projectSide">, not using innerHTML? both plain javascript and jquery please...

Upvotes: 0

Views: 73

Answers (3)

effe
effe

Reputation: 1365

No need to use detach() because append() & appendTo() attaches existing objects to new position after detaching from old position.

$('#idDetails ul').appendTo('#projectSide') //is enough.

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16369

I'll try and do this both ways off the top of my head.

jQuery:

$('#idDetails').find('ul').appendTo('#projectSide');

Javascript:

var node = document.getElementById('idDetails').firstElementChild,
    parent = node.parentNode;

parent.removeChild(node);

document.getElementById('projectSide').appendChild(node);

Not entirely sure about the vanilla JS one, but feel pretty confident on the jQuery one.

Just to satisfy my curiosity, here is a jsFiddle to show both working.

Upvotes: 1

dthree
dthree

Reputation: 20790

var $ul = $('aside ul');
$ul.detach();
$('#projectSide').append($ul);

Upvotes: 0

Related Questions