Translate simple Jquery to VanillaJS

Question

I have this: $('#night > li').appendTo('#day');

The code moves all <li> elements of <ul id="night"> to the end of <ul id="day">.

Please, how can I translate this into VanillaJS?

I mean, how do I rewrite the code so I do not need Jquery?

Have this so far:

document.getElementById('night').li.appendTo.document.getElementById('day');

http://stackoverflow.com/questions/20435653/what-is-vanillajs — James Donnelly, Jan 19 '15 at 11:22
You don't need jQuery. jQuery is basically a way of making javascript a bit easier but with a fairly chunky library to do so (another http request to slow down a website). Google "JavaScript tutorials" and get stuck in. jQuery doesn't do anything that you cannot do with JavaScript. **$('#someid') = getElementById('someid')** — ggdx, Jan 19 '15 at 11:26
@dwhite.me : "jQuery doesn't do anything that you cannot do with JavaScript"... except write shorter, more readable code :) — iCollect.it Ltd, Jan 19 '15 at 11:30
@TrueBlueAussie - Fairly irrelevant. Code needs to be interpreted by the browser first, enhance user experience second (including minimising load time as much as possible) and THEN a very distant third be legible. — ggdx, Jan 19 '15 at 11:33

score 5 · Answer 1 · answered Jan 19 '15 at 11:29

In pure JavaScript you could do it like this:

var night = document.getElementById("night");
var day = document.getElementById("day");
var lis = document.querySelectorAll("#night > li");

for (var i = 0, len = lis.length; i < len; i++) {
  day.appendChild(lis[i]);
}

See fiddle for working example.

jAndy · Accepted Answer · 2015-01-19T11:55:03.277

2

Could look like so

var target = document.getElementById( 'day' );
[].forEach.call(document.querySelectorAll( '#night > li' ), function( li ) {
    day.appendChild( li );
});

edited Jan 19 '15 at 11:55

answered Jan 19 '15 at 11:30

jAndy

231,737
57
305
359

typo: car should be var – Malasorte Jan 19 '15 at 11:49

Mihail Alexe · Answer 3 · 2015-01-19T11:41:16.400

You can try something like this:

var dayUl = document.getElementById("day");
var nightUl = document.getElementById("night");
var nightLis = nightUl.childNodes;

for (var i = 0, len = nightLis.length; i < len; i++) 
{
    dayUl.appendChild(nightLis[i]);
}

Also, you can go with @Marcus Ekwall's solution, but keep in mind that the solution isn't fully compatible with IE8 or below, and the first query for the night node is redundant (because below he searches for #night > li)

Translate simple Jquery to VanillaJS

3 Answers3