Tuesday, 18 July, 2017 UTC

6 jQuery-inspired Native DOM Manipulation Methods You Should Know

6 jQuery-inspired Native DOM Manipulation Methods You Should Know

Summary

When jQuery was released, one of the main reasons behind its meteoric rise to popularity was the ease with which it could select DOM elements, traverse them and modify their content. But that was way back in 2006. In those days we were stuck with Internet Explorer 7 and ECMAScript 5 was still a couple of years off.
Luckily, a lot has changed since then. Browsers have become considerably more standards compliant and native JavaScript has improved in leaps and bounds. And as things have improved, we have seen people questioning whether we still need jQuery. I'm not going to get into that argument here, rather I'd like to offer some food for thought, as I present six native DOM manipulation methods which were inspired by this great library. These are as follows:
  • append()
  • prepend()
  • after()
  • before()
  • replaceWith()
  • remove()
In this article I want to examine the similarities and the differences between these native DOM manipulation methods and their jQuery counterparts. Then hopefully, the next time you find yourself including jQuery for the sake of a convenience method or two, you might opt to embrace the power of vanilla JavaScript instead.
1. append()
The append method performs an insertion operation, that is, it adds nodes to the DOM tree. As the name indicates, it appends the passed arguments to the list of children of the node on which it is invoked. Consider the following example:
const parent = document.createElement('div')
const child1 = document.createElement('h1')
parent.append(child1)
parent.outerHTML
// <div><h1></h1></div>

const child2 = document.createElement('h2')
parent.append(child2)
parent.outerHTML
// <div><h1></h1><h2></h2></div>
At this point you would be forgiven for asking how this differs from the native appendChild method. Well, a first distinction is that append() can take multiple arguments at once, and the respective nodes will be appended to the list of children, just like the jQuery append method. Continuing the previous snippet:
const child3 = document.createElement('p')
const child4 = document.createElement('p')
const child5 = document.createElement('p')
parent.append(child3, child4, child5)
parent.outerHTML
/* Outputs:
<div>
  <h1></h1>
  <h2></h2>
  <p></p>
  <p></p>
  <p></p>
</div>
*/
Furthermore, an argument can be even a string. So, while with appendChild() a rather verbose syntax must be employed:
parent.appendChild(document.createTextNode('just some text'))
with append() the same operation is shorter:
parent.append('just some text')
parent.outerHTML
/* Outputs:
<div>
  <h1></h1>
  <h2></h2>
  <p></p>
  <p></p>
  <p></p>
  just some text
</div>
*/
The string is converted to a Text node, so any HTML is not parsed:
parent.append('<p>foo</p>')
parent.outerHTML
/* Outputs:
<div>
  <h1></h1>
  <h2></h2>
  <p></p>
  <p></p>
  <p></p>
  just some text
  &lt;p&gt;foo&lt;/p&gt;
</div>
*/
This is in contrast to the jQuery method, where strings of markup are parsed and the corresponding nodes are generated and inserted into the DOM tree.
As is usually the case, if the appended node it is already present in the tree, it is first removed from its old position:
const myParent = document.createElement('div')
const child = document.createElement('h1')
myParent.append(child)
const myOtherParent = document.createElement('div')
const myOtherParent.append(child)
myOtherParent.outerHTML
// <div><h1></h1></div>

myParent.outerHTML
// <div></div>"
A final difference between append() and appendChild() is that the latter returns the appended node, whereas the former returns undefined.
2. prepend()
The prepend method is very similar to append(). Children are added, but this time they are prepended to the list of children of the node on which the method is called, just before the first child:
const parent = document.createElement('div')
const child1 = document.createElement('p')
parent.prepend(child1)
parent.outerHTML
// <div><p></p></div>

const child2 = document.createElement('h2')
parent.prepend('just some text', child2)
parent.outerHTML
/* Outputs:
<div>
  just some text
  <h2></h2>
  <p></p>
</div>
*/
The return value of the method is undefined. The corresponding jQuery method is prepend().
3. after()
The after method is another insertion method, but this time it must be called on a child node, that is, a node with a definite parent. Nodes are inserted as adjacent siblings, as can be seen in the following example:
const parent = document.createElement('ul')
const child = document.createElement('li')
child.append('First item')
parent.append(child)
child.after(document.createElement('li'))
parent.outerHTML
// <ul><li>First item</li><li></li></ul>
The return value is undefined and in jQuery the similar operation is after().
4. before()
The before method is similar to after(), but now the nodes are inserted before the child node:
const parent = document.createElement('ul')
const child = document.createElement('li')
child.append('First item')
parent.append(child)

const child1 = document.createElement('li')
child1.append('Second item')

const child2 = document.createElement('li')
child2.append('Third item')

child.before(child1, child2)

parent.outerHTML
/* Outputs:
<ul>
  <li>Second item</li>
  <li>Third item</li>
  <li>First item</li>
</ul>
*/
Once again, the return value is undefined. The respective jQuery method is before().
Continue reading %6 jQuery-inspired Native DOM Manipulation Methods You Should Know%

... more @ sitepoint.com

sitepoint.com