jQuery Alternatives

Question 1

hide/show an element

Answer 1

el.style.display = ‘none’ or ‘’ or ‘block’

Question 2

$el.addClass( ‘someclass’ )

Answer 2

if (el.classList)
el.classList.add(className);
else
el.className += ‘ ‘ + className;

Question 3

$(el).after(htmlString);

Answer 3

el.insertAdjacentHTML(‘afterend’, htmlString);

Question 4

$(parent).append(el);

Answer 4

someParent.appendChild(el);

Question 5

$(el).children();

Answer 5

el.children;

Question 6

$(selector).each(function(i, el){ …

Answer 6

var els = document.querySelectorAll( selector );
Array.prototype.forEach.call( els, function( el, i ) {...

Question 7

$(el).html();

Answer 7

el.innerHTML or el.innerHTML = ‘some content’

Question 8

$(el).text();

Answer 8

el.textContent or el.textContent = ‘something’;

Question 9

$(el).next();

Answer 9

el.nextElementSibling;

Question 10

$(el).prev();

Answer 10

el.previousElementSibling;

Question 11

$(el).parent();

Answer 11

el.parentNode;

Question 12

$(parent).prepend(el);

Answer 12

parent.insertBefore(el, parent.firstChild);

Question 13

$(el).toggleClass(className);

Answer 13

if (el.classList) {
el.classList.toggle(className);
} else { // use className

Question 14

$(el).on(eventName, eventHandler);

Answer 14

el.addEventListener(eventName, eventHandler);

Question 15

$(document).append(“<div class="hello">Hi There!</div>

Answer 15

var d = document.createElement("div");
d.classList.add("one");
var t = document.createTextNode("Hi There!");
d.appendChild(t);
document.body.appendChild(d);

Question 16

How could you create and insert some new text saying “Hi World” into a new div tag as the first element in the body, before all other elements?

Answer 16

var text = document.createTextNode("Hi World");
var el = document.createElement("div");
el.appendChild(text);
document.body.insertBefore(el, body.firstChild);
// insertBefore takes the element to be inserted and the location.

Question 17

How can you get a copy of a node called myNode? What if you want all of that nodes children as well?

Answer 17

var clone = myNode.cloneNode(false); // just the top node
var cloneDeep = myNode.cloneNode(true); // children as well.

Question 18

var main = document.getElementById("main");
How could you access main's first child?

Answer 18

main.firstChild or main.childNodes[0];

Question 19

Alternative for $(document).ready()

Answer 19

function ready(fn) {
      if (document.readyState != 'loading'){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }