Apply now

From jQuery to DOM and ES6

Looking back in time, jQuery was created to cope with JavaScript implementation differences between browsers. But time have changed. For the better.

From jQuery to DOM and ES6
Share article
Looking back in time, jQuery was created to cope with JavaScript implementation differences between browsers. Internet Explorer was the main culprit at that time and lagged behind Mozilla Firefox and then Google Chrome. As an easy to use solution, jQuery has been widely embraced by developers and beginners who, for the majority started to use JavaScript through this library.

In 2017, IE8 to IE11 usage have droppped to a very small part of web traffic and can be safely ignored. This means that we can drop jQuery from our application and rely on standard DOM and some ES6 sprinkles. Speed being one of the main criterias for SEO (and users), sparing our browser the effort of loading a whole library before processing our code offers a nice bonus we all should consider to get quickly!

Selecting DOM elements

Suppose you have the following HTML:

<div id="lead">lorem ipsum</div>
  <li class="green">First item</li>
  <li class="red">Second item</li>
  <li class="green">Third item</li>
  <li class="red">Last item</li>
<p class="green status">A great status</p>

Then in jQuery you would use the $() function in combination with some CSS selector to go and fetch the DOM elements.

var lead = $('#lead');
var firstRedItem = $('.red').eq(0);
var greenListItems = $('');  // Adding `li` not to select the `p`.

The alternative is now to use three standard DOM methods:

const lead = document.getElementById('lead');  // ⚠️ no #
const firstRedItem = document.querySelector('.red');
const greenListItems = document.querySelectorAll('');

You may have noticed that we used const over var. Moving forward using ES6, we won't use var anymore, but const or let. We'll use let when we want to reassign a variable, const otherwise:

let name = "George";
name = name + " Abitbol"; // `name` is being re-assigned.console.log(name);

You can read more on let and const

Inserting a DOM element

A classic usage of JavaScript would be to insert a new piece of content into the DOM. On a blog, an AJAX-powered comment section would insert the comment when it's submitted, without reloading the page.

<div id="comments">  
  <p class="comment">This was great!</p>
  <p class="comment">I loved it :)</p>

  <textarea id="commentContent"></textarea>
  <button>Post comment</button>

Using jQuery, this is how we would do it:

var commentContent = $('#commentContent').val(); // Skipping AJAX part
$('#comments').append('<p class="comment">' + commentContent + '</p>');

Now we'll rely on Element#insertAdjacentHTML and ES6 template literals:

const commentContent = document.getElementById('commentContent').value;
const comments = document.getElementById('comments');

comments.insertAdjacentHTML('beforeend', `<p class="comment">${commentContent}</p>`);

Updating CSS classes

Adding, removing or toggling a CSS class on a DOM element is something quite common in a JavaScript app. With jQuery, we would use:


And this would apply the change to all elements matching the given selector.

Without jQuery, you can use classList:

// For one element selected with `getElementById` or `querySelector`

// For multiple elements selected with `querySelectorAll`:
elements.forEach((element) => {  
  // etc.

See? We just used Array.forEach!

Event listeners

JavaScript lets your bring dynamic behavior to your webpage. The simplest example we can take is having an alert pop up when click on a button.

<button id="useless-btn">Click me!</button>

With jQuery, we would use the .on() method (or one of its shortcuts):

$('#useless-btn').on('click', function(event) {  
  alert('Thanks for clicking!');

The modern DOM gives you addEventListener to play with:

const button = document.getElementById('useless-btn');
button.addEventListener('click', (event) => {  
  alert('Thanks for clicking!');

To get information on the clicked element, you can use inside the event listener callback. But what was that =>? Well, it is called an arrow function. Those are great to preserve this and get rid of the var that = this trick. Wes Bos did a great post and video on the topic.


When you want to do AJAX, the original implementation relies on XMLHttpRequest, but nobody wants to use that. jQuery solved this problem ten years ago introducing the $.ajax method with its two handy shortcuts $.get and $.post:

// GET request
  url: "",  
  type: "GET"  
  success: function(data) {    

// POST request

const data = { name: "a name", email: "" };

  url: url,  
  type: "POST",  
  data: data,  
  success: function(data) {    

With modern browsers, we can rely on fetch which provides a nicer API than raw XMLHttpRequest.

// GET request
  .then(response => response.json())  
  .then((data) => {    

// POST requestconst 
data = { name: "a name", email: "" };
fetch(url, {  
  method: 'POST',  
  headers: { "Content-Type": "application/json" },  
  body: JSON.stringify(data)})
   .then(response => response.json())
   .then((data) => {

You can notice the fetch() second argument is a hash using more straightforward key names. Parts of the HTTP request are outlined: the method (or verb), the headers and the body.


Here are some useful resources you might want to read:

Want to know more about Le Wagon's 9-week bootcamp?
Download Syllabus
Keep reading
Learn to code

Thoughts & advice from 5 part-time bootcamp students

In April 2019, we launched our first ever part time bootcamp in London, and are about to roll this course out worldwide. We caught up with some of the current students of batch 241 to hear what they had to say. Keep reading to hear who they are and about their journeys so far!

Graduate stories

Jaemin: rekindling the passion for coding

Can a CS graduate benefit from a coding bootcamp? An extra dose of motivation and focus placed on practical aspects of programming can be a great addition to theoretical knowledge. Meet Jaemin, one of Le Wagon Oslo alumni who currently works as Information Technology and Services Consultant at DNB, Norway's largest financial services group.

Learn to code

What I learnt from career changing in Asia

From working at an NGO as a technical writer to a freelance developer, and now Head of Product at a sports-tech company. What does our Dan learnt from this career changing journey in Asia?

Interested in joining the #1 ranked coding bootcamp?

We are in 39 cities worldwide.