The Fetch API

Learn all about the Fetch API, the modern approach to

asynchronous network requests which uses Promises as a
building block
Published Feb 02 2018, Last Updated Apr 15 2019

Global scale on a startup budget. Built on Apache Cassandra™ in the cloud. Get $300
free credit.ADS VIA CARBON

 Introduction to the Fetch API

 Using Fetch
o Catching errors

 Response Object
o Metadata

 headers

 status

 statusText

 url

o Body content

 Request Object
 Request headers
 POST Requests
 How to cancel a fetch request
 Looking for more?
Introduction to the Fetch API
Since IE5 was released in 1998, we’ve had the option to make
asynchronous network calls in the browser
using XMLHttpRequest (XHR).

Quite a few years after this, GMail and other rich apps made heavy
use of it, and made the approach so popular that it had to have a
name: AJAX.

Working directly with the XMLHttpRequest has always been a pain

and it was almost always abstracted by some library, in particular
jQuery has its own helper functions built around it:

 jQuery.ajax()
 jQuery.get()

 jQuery.post()
and so on.

They had a huge impact on making this more accessible in

particular with regards to making sure all worked on older
browsers as well.

The Fetch API, has been standardized as a modern approach to

asynchronous network requests, and uses Promises as a building
block.

Fetch has a good support across the major browsers, except IE.
The polyfill https://github.com/github/fetch released
by GitHub allows us to use fetch on any browser.

Using Fetch
Starting to use Fetch for GET requests is very simple:

fetch('/file.json')

and you’re already using it: fetch is going to make an HTTP

request to get the file.json resource on the same domain.

As you can see, the fetch function is available in the

global window scope.

Now let’s make this a bit more useful, let’s actually see what the
content of the file is:

fetch('./file.json')
.then(response => response.json())
.then(data => console.log(data))
Calling fetch() returns a promise. We can then wait for the
promise to resolve by passing a handler with the then() method
of the promise.

That handler receives the return value of the fetch promise,

a Response object.

We’ll see this object in detail in the next section.

Catching errors
Since fetch() returns a promise, we can use the catch method of
the promise to intercept any error occurring during the execution
of the request, and the processing done in the then callbacks:

fetch('./file.json')
.then(response => {
//...
})
.catch(err => console.error(err))

Another way of catching errors is to manage them in the first then:

fetch('./file.json')
.then(response => {
if (!response.ok) { throw
Error(response.statusText) }
return response
})
.then(response => {
//...
})

Response Object
The Response Object returned by a fetch() call contains all the
information about the request and the response of the network
request.

Metadata

headers
Accessing the headers property on the response object gives you
the ability to look into the HTTP headers returned by the request:

fetch('./file.json').then(response => {
console.log(response.headers.get('Content-Type'))
console.log(response.headers.get('Date'))
})
status
This property is an integer number representing the HTTP
response status.

 101, 204, 205, or 304 is a null body status

 200 to 299, inclusive, is an OK status (success)
 301, 302, 303, 307, or 308 is a redirect

fetch('./file.json').then(response =>
console.log(response.status))

statusText
statusText is a property representing the status message of the
response. If the request is successful, the status is OK.

fetch('./file.json').then(response =>
console.log(response.statusText))

url
url represents the full URL of the property that we fetched.
fetch('./file.json').then(response =>
console.log(response.url))

Body content
A response has a body, accessible using several methods:

 text() returns the body as a string

 json() returns the body as a JSON-parsed object

 blob() returns the body as a Blob object

 formData() returns the body as a FormData object

 arrayBuffer() returns the body as an ArrayBuffer object

All those methods return a promise. Examples:

fetch('./file.json')
.then(response => response.text())
.then(body => console.log(body))
fetch('./file.json')
.then(response => response.json())
.then(body => console.log(body))

The same can be written using the ES2017 async functions:

;(async () => {
const response = await fetch('./file.json')
const data = await response.json()
console.log(data)
})()

Request Object
The Request object represents a resource request, and it’s usually
created using the new Request() API.

Example:

const req = new Request('/api/todos')

The Request object offers several read-only properties to inspect

the resource request details, including

 method: the request’s method (GET, POST, etc.)

 url: the URL of the request.

 headers: the associated Headers object of the request

 referrer: the referrer of the request

 cache: the cache mode of the request (e.g., default, reload,

no-cache).
And exposes several methods
including json(), text() and formData() to process the body of
the request.
The full API can be found
at https://developer.mozilla.org/docs/Web/API/Request

Request headers
Being able to set the HTTP request header is essential,
and fetch gives us the ability to do this using the Headers object:

const headers = new Headers()

headers.append('Content-Type', 'application/json')

or:

const headers = new Headers({

'Content-Type': 'application/json'
})

To attach the headers to the request, we use the Request object,

and pass it to fetch() instead of passing the URL.

Instead of:

fetch('./file.json')

we do

const request = new Request('./file.json', {

headers: new Headers({
 'Content-Type': 'application/json'
})
})
fetch(request)

The Headers object is not limited to setting value, but we can also
query it:

headers.has('Content-Type')
headers.get('Content-Type')

and we can delete a header that was previously set:

headers.delete('X-My-Custom-Header')

POST Requests
Fetch also allows to use any other HTTP method in your request:
POST, PUT, DELETE or OPTIONS.

Specify the method in the method property of the request, and

pass additional parameters in the header and in the request body:

Example of a POST request:

const options = {
method: 'post',
 headers: {
'Content-type': 'application/x-www-form-
urlencoded; charset=UTF-8'
},
body: 'name=Flavio&test=1'
}

fetch(url, options).catch(err => {

console.error('Request failed', err)
})

How to cancel a fetch request

For a few years after fetch was introduced, there was no way to
abort a request once opened.

Now we can, thanks to the introduction

of AbortController and AbortSignal, a generic API to
notify abort events

You integrate this API by passing a signal as a fetch parameter:

const controller = new AbortController()

const signal = controller.signal

fetch('./file.json', { signal })
You can set a timeout that fires an abort event 5 seconds after the
fetch request has started, to cancel it:

setTimeout(() => controller.abort(), 5 * 1000)

Conveniently, if the fetch already returned, calling abort() won’t

cause any error.

When an abort signal occurs, fetch will reject the promise with
a DOMException named AbortError:

fetch('./file.json', { signal })
.then(response => response.text())
.then(text => console.log(text))
.catch(err => {
if (err.name === 'AbortError') {
console.error('Fetch aborted')
} else {
console.error('Another error', err)
}
})

Looking for more?

Working with network is hard, right? You might find that
the Axios JavaScript library might be a better fit for your needs
with some additional features built upon Fetch. Check it out!
Download my free JavaScript Beginner's Handbook and check out
my JavaScript Masterclass!

XMLHttpRequest
(XHR)
The introduction of XMLHttpRequest (XHR) in browsers
in the mid 2000's was a huge win for the Web Platform.
Let's see how it works.
Published Apr 05 2018

Your new development career awaits. Check out the latest listings.ADS VIA CARBON

 Introduction
 An example XHR request
 Additional open() parameters
 onreadystatechange
 Aborting an XHR request
 Comparison with jQuery
 Comparison with Fetch
 Cross Domain Requests
  Uploading files using XHR

Introduction
The introduction of XMLHttpRequest (XHR) in browsers in the mid
2000’s was a huge win for the Web Platform. Let’s see how it
works.

Things that now look normal, back in the day, looked like they
were coming from the future. I’m talking about GMail or Google
Maps, for example, which were all based in great part on XHR.

XHR was invented at Microsoft in the nineties, and became a de-

facto standard as all browsers implemented it in the 2002-2006
period. The W3C standardized XMLHttpRequest in 2006.

As it sometimes can happen in the Web Platform, initially there

were a few inconsistencies that made working with XHR quite
different cross-browser.

Libraries like jQuery got a boost of popularity by providing an easy

to use abstraction for developers, and this in turn helped spread
the usage of this technology.

An example XHR request

The following code creates an XMLHttpRequest (XHR) request
object, and attaches a callback function that responds on
the onreadystatechange event.
The xhr connection is set up to perform a GET request
to https://yoursite.com, and it’s started with the send() method:

const xhr = new XMLHttpRequest()

xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
xhr.status === 200 ?
console.log(xhr.responseText) :
console.error('error')
}
}
xhr.open('GET', 'https://yoursite.com')
xhr.send()

Additional open() parameters

In the example above we just passed the method and the URL to
the request.

We can also specify the other HTTP methods -

(get, post, head, put, delete, options).

Other parameters let you specify a flag to make the request

synchronous if set to false, and a set of credentials for HTTP
authentication:

open(method, url, asynchronous, username, password)

onreadystatechange
The onreadystatechange is called multiple times during an XHR
request. We explicitly ignore all the states other than readyState
=== 4, which means that the request is done.

The states are

 1 (OPENED): the request starts

 2 (HEADERS_RECEIVED): the HTTP headers have been
received
 3 (LOADING): the response begins to download
 4 (DONE): the response has been downloaded

Aborting an XHR request

An XHR request can be aborted by calling the abort() method on
the xhr object.

Comparison with jQuery

With jQuery these lines can be translated to:

$.get('https://yoursite.com', data => {

console.log(data)
}).fail(err => {
console.error(err)
})
Comparison with Fetch
With the Fetch API this is the equivalent code:

fetch('https://yoursite.com')
.then(data => {
console.log(data)
})
.catch(err => {
console.error(err)
})

Cross Domain Requests

Note that an XMLHttpRequest connection is subject to specific
limits that are enforced for security reasons.

One of the most obvious is the enforcement of the same origin

policy.

You cannot access resources on another server, unless the server

explicitly supports this using CORS (Cross Origin Resource
Sharing).
A Guide to Object-Oriented
Programming in JavaScript
Objects, classes, encapsulation, polymorphism, and more!

Esakkimuthu E
Follow
Oct 27, 2019 · 9 min read

It all starts with an object.

An object is a thing that we interact with, it has properties and

methods. The object is the heart of object-oriented
programming, not only for JavaScript but also for Java, C, C+
+, and others. Stop thinking about individual variables and
functions and start thinking in terms of self-sufficient objects.

Here’s a list of concepts that are most often used when talking
about object-oriented programming (OOP):

 Object, property, and method

 Class

 Encapsulation

 Abstraction

 Reusability/inheritance

 Polymorphism

 Association

 Aggregation

 Composition

Object, property, and method

Object literal

Create a new object in JavaScript by setting its properties

inside curly braces. Object literals property values can be any
data types, like function literals, arrays, strings, numbers, or
boolean.

Let’s create an object with a named book, with properties such

as author, published year, title, and a method — summary.
const book = {
title: "Hippie",
author: "Paulo Coelho",
year: "2018"
}

After creating an object you can get the value with dot
notation. For example, we can get the value of the title
with book.title. We can also access the properties with square
brackets: book[‘title’].

Object constructor

Object constructor is the same as a regular function. It will be

called each time an object is created. We can use them with
the new keyword. Object constructor is useful when we want to
create multiple objects with the same properties and methods.
const book = {
title: "Hippie",
author: "Paulo Coelho",
year: "2018"
}const book1 = {
title: "The Alchemist",
author: "Paulo Coelho",
year: "1988",
}
If we want to create multiple book objects we have to duplicate
the code for each book. We can keep creating books but it’s
kind of a pain — the object constructor helps us to reuse the
object literal.
function Book(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}const book1 = new Book ('Hippie', 'Paulo Coelho',
'2018');console.log(book1);
> Book {
title: "Hippie",
author: "Paulo Coelho",
year: "2018"
}// if we want to create more than one book just we call
function book with new keyword.const book2 = new Book ('The
Alchemist', 'Paulo Coelho', '1988');

book1 and book2 create an instance of Book and assigned it to a

variable. To find out whether an object is an instance of
another one. We can use instanceof.
book1 instanceof Book
> true

Object.create()

Every object in JavaScript will create from the master Object.

whenever we use object with a capital ‘O’ it refers to the master
object. We can print the master object in the console. The
master object has the number of methods and here we are
going to see Object.create() method.
The Object.create() method creates a new object, using an
existing object as the prototype. Here’s the basic syntax:
Object.create(proto, [propertiesObject])

proto is the prototype of the newly-created

object. propertiesObject is an optional one.

Let’s take a simple example:

const Book = {
summary : function() {
console.log(`${this.title} is written by $
{this.author}.`)
}
}const book1 = Object.create(Book);
book1.author = "Paulo Coelho";
book1.title = "Hippie";console.log(book1.summary());
> Hippie is written by Paulo Coelho.

In the above example, we created a prototype object book1 and

assigned a value for author and title. We can see the summary
function inside the proto object:

We will look at the Object.create() method in detail below.

Class
Class is not an object — it is the blueprint of an object. Classes
are special functions. You can define functions using function
expressions and declarations and you can define classes that
way as well. We can create the number of objects using the
blueprint.

You can use the class keyword and the name of the class. The
syntax is similar to that of Java.
Class syntax is a nice way to use object-oriented programming
and managing prototypes:
let Book = function(name) {
this.name = name
}let newBook = function(name) {
Book.call(this, name)
} newBook.prototype = Object.create(Book.prototype);
const book1 = new newBook("The Alchemist");

This is using ES6 class syntax:

class Book {
constructor(name) {
this.name = name
}
}class newBook extends Book {
constructor(name) {
super(name);
}
}const book1 = new newBook("The Alchemist");

Class syntax is syntactical sugar — behind the scenes, it still

uses a prototype-based model. Classes are functions, and
functions are objects in JavaScript.
class Book {
constructor(title, author){
this.title = title;
this.author = author;
}
summary() {
console.log(`${this.title} written by ${this.author}`);
}
}const book1 = new Book("", "");console.log(typeof Book);
> "function"console.log(typeof book1);
> "object"

Encapsulation
Encapsulation means hiding information or data. It refers to
the ability of the object to execute its functionality without
revealing any execution details to the caller. In other words,
the private variable is only visible to the current function and
is not accessible to the global scope or other functions.
const Book = function(t, a) {
let title = t;
let author = a;

return {
summary : function() {
console.log(`${title} written by ${author}.`);
}
}
}
const book1 = new Book('Hippie', 'Paulo
Coelho');book1.summary();
> Hippie written by Paulo Coelho.

In the above code the title and the author are only visible
inside the scope of the function Book and the method summary is
visible to the caller of Book. So the title and the author are
encapsulated inside Book.

Abstraction
Abstraction means implementation hiding. It is a way of
hiding the implementation details and only showing the
essential features to the caller. In other words, it hides
irrelevant details and shows only what’s necessary to the outer
world. A lack of abstraction will lead to problems of code
maintainability.
const Book = function(getTitle, getAuthor) {
// Private variables / properties
let title = getTitle;
let author = getAuthor;// Public method
this.giveTitle = function() {
return title;
 }

// Private method
const summary = function() {
return `${title} written by ${author}.`
}// Public method that has access to private method.
this.giveSummary = function() {
return summary()
}
}const book1 = new Book('Hippie', 'Paulo
Coelho');book1.giveTitle();
> "Hippie"book1.summary();
> Uncaught TypeError: book1.summary is not a
functionbook1.giveSummary();
> "Hippie written by Paulo Coelho."

Reusability/Inheritance
JavaScript inheritance is a mechanism allows us to create a
new class using the existing class. It means the child class
inherits all the properties and behaviors of the parent class.

Generally, JavaScript is not a class-based language. The

keyword class was introduced in ES6 but is syntactical sugar,
JavaScript remains prototype-based. In JavaScript inheritance
is achieved by using the prototype. This pattern is
called Behavior Delegation Pattern or prototypal inheritance.

Let’s consider our book example:

function Book(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
this.summary = function() {
console.log(`${this.title} is written by $
{this.author}.`)
}
}
const book1 = new Book ('Hippie', 'Paulo Coelho', '2018');const
book2 = new Book ('The Alchemist', 'Paulo Coelho', '1988');

Prototypal inheritance

For each instance of Book, we’re recreating the memory for the
methods from the base class. These methods must be shared
across all instances — they should not be specific to the
instance. Here the prototype comes into the picture:
let Corebook = function(title) {
this.title = title
}Corebook.prototype.title = function() {
console.log(`name of the book is ${this.title}`);
}Corebook.prototype.summary = function(author) {
console.log(`${this.title} is written by ${this.author}`);
}let Book = function(title, author) {
Corebook.call(this, title, author)
}Book.prototype = Object.create(Corebook.prototype);let book1 =
new Book('The Alchemist', 'Paulo Coelho');book1.title();
> name of the book is The Alchemistbook1.summary();
> The Alchemist is written by Paulo Coelho

In the above code, the instance of Book has a copy of the

prototype, which is linked to the prototype of Book, which in
turn links to the prototype of Corebook.

Polymorphism
The ability to call the same method on different objects and
have each of them respond in their own way is called
polymorphism.
let book1 = function () {}
book1.prototype.summary = function() {
return "summary of book1"
}let book2 = function() {}
book2.prototype = Object.create(book1.prototype);
book2.prototype.summary = function() {
 return "summary of book2"
}let book3 = function() {}
book3.prototype = Object.create(book1.prototype);
book3.prototype.summary = function() {
return "summary of book3"
}

var books = [new book1(), new book2(), new book3()];

books.forEach(function(book){
console.log(book.summary());
});> summary of book1
> summary of book2
> summary of book3

Relationships between the objects will be defined by

Association, Aggregation, and Composition.

Association
Association is the relationship between two or more objects.
Each Object is independent. In other words, association
defines the multiplicity between objects: one-to-one, one-to-
many, many-to-one, many-to-many.

function Book(title, author) {

this.title = title;
this.author = author;
}const book1 = new Book ('Hippie', 'Paulo Coelho');const book2
= new Book ('The Alchemist', 'Paulo Coelho');book2.multiplicity
= book1

book1 was assigned to the property of multiplicity to

object book2. It shows the relationship between
objects book1 and book2. Both can be added and removed
independently.
Aggregation
Aggregation is a special case of an association. In the
relationship between two objects, one object can have a more
major role than the other. In other words, when an object
takes more ownership than another one, that is aggregation.
The owner object is often called the aggregate and the owned
object is called the component. Aggregation is also called a
“Has-a” relationship.

function Book(title, author) {

this.title = title;
this.author = author;
}const book1 = new Book ('Hippie', 'Paulo Coelho');const book2
= new Book ('The Alchemist', 'Paulo Coelho');let publication =
{
"name": "new publication Inc",
"books": []
}publication.books.push(book1);
publication.books.push(book2);

book1 and book2 were added to books under publication object.

If the publication object is deleted until book1 and book2 are
available, then both Book and publication live independently.

Composition
Composition is a special case of aggregation. Composition is
when an object contains another object and the contained
object can’t live without the container object.
let Book = {
"title": "The Alchemist",
"author": "Paulo Coelho",
"publication": {
"name": "new publication Inc",
"address": "chennai"
}
}

Here the property publication is strictly bounded with

the Book object, and publication can’t live without
theBook object. If the Book object id was deleted, then the
publication would also be deleted.

Composition Over Inheritance

Inheritance is when an object is based on another object. For
example, book1 has inherited properties and methods for
books like title, author and summary. So it creates the
relationship that book1 is-a Book.

The composition is collecting simple objects and combining

them to build more complex objects. To build book1 we need
methods, like paper and a pen. So it creates a relationship that
book1 has-a paper and a pen:
const getTitle = (data) => ({
title : () => console.log(`title : ${data.title}`)
});const getAuthor = (data) => ({
author : () => console.log(`author: ${data.author}`)
});const getSummary = () => ({
summary :() => console.log(`book summary need to update.`)
});const Book = (title, author) => {
const data = {
title,
author
}
 return Object.assign({},
getTitle(data),
getAuthor(data),
getSummary()
)
}let book1 = Book('The Alchemist', 'Paulo
Coelho');book1.title();
> "title : The Alchemist"

JavaScript DOM
This section covers the JavaScript Document Object Model (DOM) and shows you
how to manipulate DOM elements effectively.

Section 1. Getting started

 Understanding the Document Object Model in JavaScript

Section 2. Selecting elements

 getElementById() – select an element by id.
 getElementsByName() – select elements by name.
 getElementsByTagName()  – select elements by a tag name.
 getElementsByClassName() – select elements by one or more class names.
 querySelector()  – select elements by CSS selectors.

Section 3. Traversing elements

 Get the parent element – get the parent node of an element.
 Get child elements – get children of an element.
 Get siblings of an element – get siblings of an element.

Section 4. Manipulating elements

 createElement() – create a new element.
  appendChild()  – append a node to a list of child nodes of a specified parent
node.
 textContent – get and set the text content of a node.
 innerHTML – get and set the HTML content of an element.
 innerHTML vs. createElement – explain the differences beetween innerHTML
and createElement when it comes to creating new elements.
 DocumentFragment – learn how to compose DOM nodes and insert them
into the active DOM tree.
 insertBefore() – insert a new node before an existing node as a child node of
a specified parent node.
 insertAfter() helper function – insert a new node after an existing node as a
child node of a specified parent node.
 append() – insert a node after the last child node of a parent node.
 prepend() – insert a node before the first child node of a parent node.
 insertAdjacentHTML() – parse a text as HTML and insert the resulting nodes
into the document at a specified position.
 replaceChild() – replace a child element by a new element.
 cloneNode() – clone an element and all of its descendants.
 removeChild() – remove child elements of a node.

Section 5. Working with Attributes

 HTML Attributes & DOM Object’s Properties – understand the relationship
between HTML attributes & DOM object’s properties.
 setAttribute() – set the value of a specified attribute on a element.
 getAttribute() – get the value of an attribute on an element.
 removeAttribute() – remove an attribute from a specified element.
 hasAttribute() – check if an element has a specified attribute or not.

Section 6. Manipulating Element’s Styles

 style property – get or set inline styles of an element.
 getComputedStyle() – return the computed style of an element.
 className property – return a list of space-separated CSS classes.
 classList property – manipulate CSS classes of an element.
 Element’s width & height – get the width and height of an element.

Section 7. Working with Events

  JavaScript events – introduce you to the JavaScript events, the event models,
and how to handle events.
 Handling events – show you three ways to handle events in JavaScript.
 Page Load Events – learn about the page load and unload events.
 load event – walk you through the steps of handling the load event
originated from the document, image, and script elements.
 DOMContentLoaded – learn how to use the DOMContentLoaded event correctly.
 beforeunload event – guide you on how to show a confirmation dialog
before users leave the page.
 unload event – show you how to handle the unload event that fires when
the page is completely unloaded.
 Mouse events – how to handle mouse events.
 Keyboard events – how to deal with keyboard events.
 Scroll events – how to handle scroll events effectively.
 scrollIntoView – learn how to scroll an element into view.
 Focus Events – cover the focus events.
 haschange event – learn how to handle the event when URL hash changes.
 Event Delegation – is a technique of levering event bubbling to handle
events at a higher level in the DOM than the element on which the event
originated.
 dispatchEvent – learn how to generate an event from code and trigger it.
 Custom Events – define a custom JavaScript event and attach it to an
element.
 MutationObserver – monitor the DOM changes and invoke a callback when
the changes occur.

Section 8. Scripting Web Forms

 JavaScript Form – learn how to handle form submit event and perform a
simple validation for a web form.
 Radio Button – show you how to write the JavaScript for radio buttons.
 Checkbox – guide you on how to manipulate checkbox in JavaScript.
 Select box – learn how to handle the select box and its option in JavaScript.
 Add / Remove Options – show you how to dynamically add options to and
remove options from a select box.
 Handling change event – learn how to handle the change event of the input
text, radio button, checkbox, and select elements.
 Handling input event – handle the input event when the value of the input
element changes.
Document Object Model in JavaScript

What is Document Object Model (DOM)

The Document Object Model (DOM) is an application programming interface (API)
for manipulating HTML and XML documents.

The DOM represents a document as a tree of nodes. It provides API that allows you
to add, remove, and modify parts of the document effectively.

Note that the DOM is cross-platform and language-independent ways of

manipulating HTML and XML documents.

A document as a hierarchy of nodes

The DOM represents an HTML or XML document as a hierarchy of nodes. Consider
the following HTML document:

<html>
<head>
<title>JavaScript DOM</title>
</head>
<body>
<p>Hello DOM!</p>
</body>
</html>
Code language: HTML, XML (xml)

The following tree represents the above HTML document:

In this DOM tree, the document is the root node. The root node has one child
which is the <html> element. The <html> element is called the document element.

Each document can have only one document element. In an HTML document, the
document element is the <html> element. Each markup can be represented by a
node in the tree.

Node Types

Each node in the DOM tree is identified by a node type. JavaScript uses integer
numbers to determine the node types.

The following table illustrates the node type constants:

Constant Value Description

Node.ELEMENT_NODE 1 An Element node like <p> or <div>.

Node.TEXT_NODE 3 The actual Text inside an Element or Attr.

Constant Value Description

Node.CDATA_SECTION_NODE 4 A CDATASection, such as <!CDATA[[ … ]]>.

Node.PROCESSING_INSTRUCTION_NODE 7 A ProcessingInstruction of an XML

document, such as <?xml-stylesheet … ?>.

Node.COMMENT_NODE 8 A Comment node, such as <!-- … -->.

Node.DOCUMENT_NODE 9 A Document node.

Node.DOCUMENT_TYPE_NODE 10 A DocumentType node, such as <!DOCTYPE

html>.

Node.DOCUMENT_FRAGMENT_NODE 11 A DocumentFragment node.

To get the type of a node, you use the nodeType property:

node.nodeType
Code language: CSS (css)

You can compare the nodeType property with the above constants to determine the
node type. For example:

if (node.nodeType == Node.ELEMENT_NODE) {
// node is the element node
}
Code language: JavaScript (javascript)

The nodeName and nodeValue properties

A node has two important properties: nodeName and nodeValue that provide specific

information about the node.

The values of these properites depends on the node type. For example, if the node
type is the element node, the nodeName is always the same as element’s tag name
and nodeValue is always null.

For this reason, it’s better to test node type before using these properties:
if (node.nodeType == Node.ELEMENT_NODE) {
let name = node.nodeName; // tag name like <p>
}
Code language: JavaScript (javascript)

Node and Element

Sometime, it’s easy to confuse between the Node and the Element.

A node is a generic name of any object in the DOM tree. It can be any built-in DOM
element such as the document. Or it can be any HTML tag specified in the HTML
document like <div> or <p>. 

An element is a node with a specific node type Node.ELEMENT_NODE, which is equal

to 1.

In other words, the node is generic type of the element. The element is a specific
type of the node with the node type Node.ELEMENT_NODE.

The following picture illustrates the relationship between the Node and Element types:

Note that the getElementById() and querySelector() returns an object with the Element type
while getElementsByTagName() or querySelectorAll() returns NodeList which is a collection of
nodes. 

Node Relationships

Any node has relationships to other nodes in the DOM tree. The relationships are
the same as the one described in a traditional family tree.

For example, <body> is a child node of the <html> node, and <html> is the parent of

the <body> node.

The <body> node is the sibling of the <head> node because they share the same

immediate parent, which is the <html> element.

The following picture illustrates the relationships between nodes:

Summary
 An HTML or XML document can be represented as a tree of nodes, like a
traditional family tree.
 Each markup can be represented as a node with a specific node type.
 Element is a specific type of node with the node type Node.ELEMENT_NODE.
  In the DOM tree, a node has relationships with other nodes.

JavaScript getElementById
Introduction to JavaScript getElementById() method
An HTML element often has an id attribute like this:

<div id="root"></div>
Code language: HTML, XML (xml)

The id is used to uniquely identify an HTML element within the document. By rules,
the id root is unique within the document; no other elements can have this root id.

The id is case-sensitive. For example, the 'root' and 'Root' are totally different id.

To select the element by its id, you use the document.getElementById method.

The following shows the syntax of the getElementById() method:

let element = document.getElementById(id);

Code language: JavaScript (javascript)

In this syntax, the id represents the id of the element that you want to select.

The getElementById() returns an Element object that describes the DOM element object

with the specified id. It returns null if there is no element with that id exists.

As mentioned earlier, id is unique within a document. However, HTML is a forgiving

language. If a document has more than one element with the same id,
the getElementById() method returns the first one it encounters.

JavaScript getElementById() method example

Consider the following HTML document:

<html>
<head>
<title>JavaScript getElementById() Method</title>
</head>
 <body>
<p id="message">A paragraph</p>
</body>
</html>
Code language: HTML, XML (xml)

The document contains a <p> element that has the id attribute with the

value message:

const p = document.getElementById('message');
console.log(p);
Code language: JavaScript (javascript)

Output:

<p id="message">A paragraph</p>

Code language: HTML, XML (xml)

Once you selected an element, you can add styles to the element, manipulate
its attributes, and traversing to parent and child elements.

Summary
 The getElementById() returns a DOM element specified by an id or null if no
matching element found.
 If multiple elements share the same id, even though it is invalid,
the getElementById() returns the first element it encounters.

JavaScript getElementsByName
Introduction to JavaScript getElementsByName()
method
Every element on an HTML document may have a name attribute:

<input type="radio" name="language" value="JavaScript">

Code language: HTML, XML (xml)

Unlike the id attribute, multiple HTML elements can share the same value of

the name attribute like this:
<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">
Code language: HTML, XML (xml)

To get all elements with a specified name, you use the getElementsByName() method of

the document object:

let elements = document.getElementsByName(name);

Code language: JavaScript (javascript)

The getElementsByName() accepts a name which is the value of the name attribute of

elements and returns a live NodeList of elements.

The return collection of elements is live. It means that the return elements are
automatically updated when elements with the same name
are inserted and/or removed from the document.

JavaScript getElementsByName() example

The following example shows a list of radio buttons that have the same name ( rate).

When you click the Rate button, the page will show an alert dialog that displays
the rating of the service such as Very Poor, Poor, OK, Good, and Very Good:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript getElementsByName Demo</title>
</head>
<body>
<p>Please rate the service:</p>
<p>
<input type="radio" name="rate" value="Very poor">
Very poor
<input type="radio" name="rate" value="Poor"> Poor
<input type="radio" name="rate" value="OK"> OK
<input type="radio" name="rate" value="Good"> Good
<input type="radio" name="rate" value="Very Good">
Very Good
</p>
<p>
<button id="btnRate">Submit</button>
</p>
<script>
 let btn = document.getElementById('btnRate');

btn.addEventListener('click', () => {
let rates = document.getElementsByName('rate');
rates.forEach((rate) => {
if (rate.checked) {
alert(`You rated: ${rate.value}`);
}
})
});
</script>
</body>
</html>
Code language: HTML, XML (xml)

How it works:

 First, select the Rate button by its id btnRate using the getElementById() method.

 Second, hook a click event to the Rate button so that when the button is
clicked, an anonymous function is executed.
 Third, call the getElementsByName() in the click event handler to select all radio
buttons that have the name rate.
 Finally, iterate over the radio buttons. If a radio button is checked, then
display an alert that shows the value of the selected radio button.

Notice that you will learn about events like click later. For now, you just need to
focus on the getElementsByName() method.

Summary
 The getElementsByName() returns a live NodeList of elements with a specified
name.
 The NodeList is an array-like object, not an array object.

JavaScript getElementsByTagName
Introduction to JavaScript getElementsByTagName() method
The getElementsByTagName() is a method of the document object or a specific DOM
element.

The getElementsByTagName() method accepts a tag name and returns a

live HTMLCollection of elements with the matching tag name in the order which they
appear in the document.

The following illustrates the syntax of the getElementsByTagName():

let elements = document.getElementsByTagName(tagName);

Code language: JavaScript (javascript)

The return collection of the getElementsByTagName() is live, meaning that it is

automatically updated when elements with the matching tag name are added
and/or removed from the document.

Note that the HTMLCollection is an array-like object, like arguments object of a function.

JavaScript getElementsByTagName() example
The following example illustrates how to use the getElementsByTagName() method to
get the number of H2 tags in the document.

When you click the Count H2 button, the page shows the number of H2 tags:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript getElementsByTagName() Demo</title>
</head>
<body>
<h1>JavaScript getElementsByTagName() Demo</h1>
<h2>First heading</h2>
<p>This is the first paragraph.</p>
<h2>Second heading</h2>
<p>This is the second paragraph.</p>
<h2>Third heading</h2>
<p>This is the third paragraph.</p>

<button id="btnCount">Count H2</button>

<script>
let btn = document.getElementById('btnCount');
btn.addEventListener('click', () => {
 let headings =
document.getElementsByTagName('h2');
alert(`The number of H2 tags: $
{headings.length}`);
});
</script>
</body>

</html>
Code language: HTML, XML (xml)

How it works:

 First, select the button Count H2 by using the getElementById() method.

 Second, hook the click event of the button to an anonymous function.
 Third, in the anonymous function, use the document.getElementsByTagName() to
get a list of H2 tags.
 Finally, show the number of H2 tags using the alert() function.

Summary
 The getElementsByTagName() is a method of the document or element object.
 The getElementsByTagName() accepts a tag name and returns a list of elements
with the matching tag name.
 The getElementsByTagName() returns a live HTMLCollection of elements.
The HTMLCollection is an array-like object.

JavaScript getElementsByClassName
Introduction to the getElementsByClassName() method
Every HTML element has an optional class attribute like this:

<button class="btn btn-primary">Save</button>

Code language: HTML, XML (xml)

The value of the class attribute is a space-separated list of the classes of the
element. The classes are case-sensitive.

The classes allows you to use the CSS to match elements. For example:
.btn {
background-color: red;
}
Code language: CSS (css)

In JavaScript, you use the getElementsByClassName() method to select elements based

on their classes.

The getElementsByClassName() method is available on the document object and any HTML

element.

The getElementsByClassName() method accepts a single argument which is a string that

contains one or more class names:

let elements = document.getElementsByClassName(classNames)

let elements =
parentElement.getElementsByClassName(classNames)
Code language: JavaScript (javascript)

In this syntax, the classNames parameter is a string that represents a class name to

match. For example:

let btn = document.getElementsByClassName('btn');

Code language: JavaScript (javascript)

If you match elements by multiple classes, you need to use whitespace to separate
them like this:

let btn = document.getElementsByClassName('btn bt-primary');

Code language: JavaScript (javascript)

Note that you cannot use class selectors e.g., .btn or .btn-primary for

the getElementsByClassName() method.

The getElementsByClassName() method returns a live HTMLCollection of elements, which is

an array-like object.

If you call the getElementsByClassName() method on the document object, the method

searches for elements with the specified class names in the whole document.

However, when you call the getElementsByClassName() method on a specific element, it

returns only matching elements in the subtree of that element.

JavaScript getElementsByClassName() examples

Let’s take some examples of using the getElementsByClassName() method.

Suppose that you have the following HTML:

<div id="app">
<header>
<nav>
<ul id="menu">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item highlight">JavaScript</li>
<li class="item">TypeScript</li>
</ul>
</nav>
<h1>getElementsByClassName Demo</h1>
</header>
<section>
<article>
<h2 class="heading-secondary">Example 1</h2>
</article>
<article>
<h2 class="heading-secondary">Example 2</h2>
</article>
</section>
</div>
Code language: HTML, XML (xml)

1) Calling JavaScript getElementsByClassName() on an element example

The following example illustrates how to use the getElementsByClassName() method to

select the <li> items which are the descendants of the <ul> element:

let menu = document.getElementById('#menu');

let items = menu.getElementsByClassName('item');

let data = [].map.call(items, item => item.textContent);

console.log(data);
Code language: JavaScript (javascript)

Output:

["HTML", "CSS", "JavaScript", "TypeScript"]

Code language: JavaScript (javascript)

How it works:
  First, select the <ul> element with the class name menu using
the getElementById() method.
 Then, select <li> elements, which are the descendants of the <ul> element,
using the getElementsByClassName() method.
 Finally, create an array of the text content of <li> elements by borrowing
the map() method of the Array object.

2) Calling JavaScript getElementsByClassName() on the document

example

To search for the element with the class heading-secondary, you use the following code:

let elements = document.getElementsByClassName('heading-

secondary');

let data = [].map.call(elements, elem => elem.textContent);

console.log(data);
Code language: JavaScript (javascript)

Output:

["Example 1", "Example 2"]

Code language: JavaScript (javascript)

This example calls the getElementsByClassName() method on the document object,

therefore, it searches for the elements with the class heading-secondary in the entire
document.

In this tutorial, you learned how to use the getElementsByClassName() method to select

elements by one or more class names.

JavaScript querySelector
Introduction to JavaScript querySelector() and
querySelectorAll() methods
The querySelector() is a method of the Element interface. The querySelector() allows you to
find the first element that matches one or more CSS selectors.
You can call the querySelector() method on the document or any HTML element.

The following illustrates the syntax of the querySelector() method:

let element = parentNode.querySelector(selector);

Code language: JavaScript (javascript)

In this syntax, the selector is a CSS selector or a group of CSS selectors to match the
descendant elements of the parentNode.

If the selector is not valid CSS syntax, the method will raise a SyntaxError exception.

If no element matches the CSS selectors, the querySelector() returns null.

Besides the querySelector(), you can use the querySelectorAll() method to find all

elements that match a CSS selector or a group of CSS selector:

let elementList = parentNode.querySelectorAll(selector);

Code language: JavaScript (javascript)

The querySelectorAll() method returns a static NodeList of elements that match the CSS

selector. If no element found, it returns an empty NodeList.

Note that the NodeList is an array-like object, not an array object. However, in

modern web browsers, you can use the forEach() method like the one in the array
object.

To convert the NodeList to an array, you use the Array.from() method like this:

let nodeList =
Array.from(document.querySelectorAll(selector));
Code language: JavaScript (javascript)

Basic selector examples

Suppose that you have the following HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
<title>querySelector() Demo</title>
</head>
<body>
<header>
 <div id="logo">
<img src="img/logo.jpg" alt="Logo" id="logo">
</div>
<nav class="primary-nav">
<ul>
<li class="menu-item current"><a
href="#home">Home</a></li>
<li class="menu-item"><a
href="#services">Services</a></li>
<li class="menu-item"><a
href="#about">About</a></li>
<li class="menu-item"><a
href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to the JS Dev Agency</h1>

<div class="container">
<section class="section-a">
<h2>UI/UX</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Autem placeat, atque accusamus voluptas
laudantium facilis iure adipisci ab
veritatis eos neque culpa id nostrum tempora tempore minima.
Adipisci, obcaecati repellat.</p>
<button>Read More</button>
</section>
<section class="section-b">
<h2>PWA Development</h2>
<p>Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Magni fugiat similique illo nobis quibusdam
commodi aspernatur, tempora doloribus
quod, consectetur deserunt, facilis natus optio. Iure
provident labore nihil in earum.</p>
<button>Read More</button>
</section>
<section class="section-c">
<h2>Mobile App Dev</h2>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Animi eos culpa laudantium consequatur ea!
Quibusdam, iure obcaecati. Adipisci
deserunt, alias repellat eligendi odit labore! Fugit iste sit
laborum debitis eos?</p>
<button>Read More</button>
</section>
 </div>
</main>
<script src="js/main.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

1) Universal selector

The universal selector denoted by * that matches all elements of any type:

The following example uses the querySelector() selects the first element in the

document:

let element = document.querySelector('*');

Code language: JavaScript (javascript)

And this example finds all elements in the document:

let elements = document.querySelectorAll('*');

Code language: JavaScript (javascript)

2) Type selector

To select elements by node name, you use the type selector e.g., a selects
all <a> elements:

elementName

The following example finds the first h1 element in the document:

let firstHeading = document.querySelector('h1');

Code language: JavaScript (javascript)

And the following example finds all h2 elements:

let heading2 = document.querySelectorAll('h2');

Code language: JavaScript (javascript)

3) Class selector

To find the element with a given class attribute, you use the class selector syntax:
.className
Code language: CSS (css)

The following example finds the first element with the menu-item class:

let note = document.querySelector('.menu-item');

Code language: JavaScript (javascript)

And the following example finds all elements with the menu class:

let notes = document.querySelectorAll('.menu-item');

Code language: JavaScript (javascript)

4) ID Selector

To select an element based on the value of its id, you use the id selector syntax:

#id
Code language: CSS (css)

The following example finds the first element with the id #logo:

let logo = document.querySelector('#logo');

Code language: JavaScript (javascript)

Since the id should be unique in the document, the querySelectorAll() is not relevant.

5) Attribute selector

To select all elements that have a given attribute, you use one of the following
attribute selector syntaxes:

[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*$*=value]
Code language: JSON / JSON with Comments (json)

The following example finds the first element with the attribute [autoplay] with any
value:

let autoplay = document.querySelector('[autoplay]');

Code language: JavaScript (javascript)
And the following example finds all elements that have [autoplay] attribute with any
value:

let autoplays = document.querySelectorAll('[autoplay]');

Code language: JavaScript (javascript)

Grouping selectors
To group multiple selectors, you use the following syntax:

selector, selector, ...

The selector list will match any element with one of the selectors in the group.

The following example finds all <div> and <p> elements:

let elements = document.querySelectorAll('<div>, <p>');

Code language: JavaScript (javascript)

Combinators
1) descendant combinator

To find descendants of a node, you use the space ( ) descendant combinator

syntax:

selector selector

For example p a will match all <a> elements inside the p element:

let links = document.querySelector('p a');

Code language: JavaScript (javascript)

2) Child combinator

The > child combinator finds all elements that are direct children of the first
element:

selector > selector

The following example finds all li elements that are directly inside a <ul> element:

let listItems = document.querySelectorAll('ul > li');

Code language: JavaScript (javascript)
To select all li elements that are directly inside a <ul> element with the class nav:

let listItems = document.querySelectorAll('ul.nav > li');

Code language: JavaScript (javascript)

3) General sibling combinator

The ~ combinator selects siblings that share the same parent:

selector ~ selector

For example, p ~ a will match all <a> elements that follow the p element, immediately

or not:

let links = document.querySelectorAll('p ~ a');

Code language: JavaScript (javascript)

4) Adjacent sibling combinator

The + adjacent sibling combinator selects adjacent siblings:

selector + selector

For example, h1 + a matches all elements that directly follow an h1:

let links = document.querySelectorAll('h1 + a');

Code language: JavaScript (javascript)

And select the first <a> that directly follows an h1:

let links = document.querySelector('h1 + a');

Code language: JavaScript (javascript)

Pseudo
1) Pseudo-classes

The : pseudo matches elements based on their states:

element:state
Code language: CSS (css)

For example a:visited matches all <a> elements that have been visited:

let visitedLinks = document.querySelectorAll('a:visited');

Code language: JavaScript (javascript)

2) Pseudo-elements

The :: represent entities that are not included in the document.

For example, p::first-line matches the first-line of all div elements:

let links = document.querySelector('p::first-line');

Code language: JavaScript (javascript)

Summary
 The querySelector() finds the first element that matches a CSS selector or a
group of CSS selectors.
 The querySelectorAll() finds all elements that match a CSS selector or a group of
CSS selectors.
 A CSS selector defines elements to which a CSS rule applies.

JavaScript Get the Parent Element

parentNode
Introduction to parentNode attribute
To get the parent node of a specified node in the DOM tree, you use
the parentNode property:

let parent = node.parentNode;

Code language: JavaScript (javascript)

The parentNode is read-only.

The Document and DocumentFragment nodes do not have a parent, therefore

the parentNode will always be null.

If you create a new node but haven’t attached it to the DOM tree, the parentNode of
that node will also be null.
JavaScript parentNode example
See the following HTML document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript parentNode</title>
</head>
<body>
<div id="main">
<p class="note">This is a note!</p>
</div>

<script>
let note = document.querySelector('.note');
console.log(note.parentNode);
</script>
</body>
</html>
Code language: HTML, XML (xml)

The following picture shows the output in the Console:

How it works:

 First, select the element with the .note class by using the querySelector() method.

 Second, find the parent node of the element.

Summary
 The node.parentNode returns the read-only parent node of a specified node
or null if it does not exist.
 The document and DocumentFragment do not have a parent node.
JavasScript Siblings
Summary: in this tutorial, you will learn how to select the next siblings, previous
siblings, and all siblings of an element. Let’s say you have the following list of items:

<ul id="menu">
<li>Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li>About Us</li>
</ul>
Code language: HTML, XML (xml)

Get the next siblings

To get the next sibling of an element, you use the nextElementSibling attribute:

let nextSibling = currentNode.nextElementSibling;

Code language: JavaScript (javascript)

The nextElementSibling returns null if the specified element is the first one in the list.

The following example uses the nextElementSibling property to get the next sibling of
the list item that has the current class:

let current = document.querySelector('.current');

let nextSibling = current.nextElementSibling;
console.log(nextSibling);
Code language: JavaScript (javascript)

Output:

<li>Careers</li>
Code language: HTML, XML (xml)

In this example:

 First, select the list item whose class is current using the querySelector().

 Second, get the next sibling of that list item using
the nextElementSibling property.

To get all the next siblings of an element, you can use the following code:
let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;

while(nextSibling) {
console.log(nextSibling);
nextSibling = nextSibling.nextElementSibling;
}
Code language: JavaScript (javascript)

Get the previous siblings

To get the previous siblings of an element, you use the previousElementSibling attribute:

let current = document.querySelector('.current');

let prevSibling = currentNode.previousElementSibling;
Code language: JavaScript (javascript)

The previousElementSibling property returns null if the current element is the first one in

the list.

The following example uses the previousElementSibling property to get the previous

siblings of the list item that has the current class:

let current = document.querySelector('.current');

let prevSiblings = current.previousElementSibling;
console.log(prevSiblings);
Code language: JavaScript (javascript)

And the following example selects all the previous siblings of the list item that has
the current class:

let current = document.querySelector('.current');

let prevSibling = current.previousElementSibling;
while(prevSibling) {
console.log(prevSibling);
prevSibling = current.previousElementSibling;
}
Code language: JavaScript (javascript)

Get all siblings of an element

To get all siblings of an element, we’ll use the logic:

 First, select the parent of the element whose siblings that you want to find.
 Second, select the first child element of that parent element.
  Third, add the first element to an array of siblings.
 Fourth, select the next sibling of the first element.
 Finally, repeat the 3rd and 4th steps until there are no siblings left. In case
the sibling is the original element, skip the 3rd step.

The following function illustrates the steps:

let getSiblings = function (e) {

// for collecting siblings
let siblings = [];
// if no parent, return no sibling
if(!e.parentNode) {
return siblings;
}
// first child of the parent node
let sibling = e.parentNode.firstChild;

// collecting siblings
while (sibling) {
if (sibling.nodeType === 1 && sibling !== e) {
siblings.push(sibling);
}
sibling = sibling.nextSibling;
}
return siblings;
};
Code language: JavaScript (javascript)

Put it all together:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Siblings</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li>About Us</li>
</ul>
 <script>
let getSiblings = function (e) {
// for collecting siblings
let siblings = [];
// if no parent, return no sibling
if(!e.parentNode) {
return siblings;
}
// first child of the parent node
let sibling = e.parentNode.firstChild;
// collecting siblings
while (sibling) {
if (sibling.nodeType === 1 && sibling !== e)
{
siblings.push(sibling);
}
sibling = sibling.nextSibling;
}
return siblings;
};

let siblings =
getSiblings(document.querySelector('.current'));
siblingText = siblings.map(e => e.innerHTML);
console.log(siblingText);
</script>
</body>
</html>
Code language: HTML, XML (xml)

Output:

["Home", "Products", "Careers", "Investors", "News", "About

Us"]
Code language: JSON / JSON with Comments (json)

Summary
 The nextElementSibling returns the next sibling of an element or null if the
element is the last one in the list.
 The previousElementSibling returns the previous sibling of an element or null if
the element is the first one in the list.
 To get all siblings of an element, you can use a helper function that utilizes
the nextElementSibling property.
Getting Child Elements of a Node in
JavaScript

Summary: in this tutorial, you will learn how to get the first child element, last child
element, and all children of a specified element.

Suppose that you have the following HTML fragment:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Child Elements</title>
</head>
<body>
<ul id="menu">
<li class="first">Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li class="last">About Us</li>
</ul>
</body>
</html>
Code language: HTML, XML (xml)

Get the first child element

To get the first child element of a specified element, you use the firstChild property
of the element:

let firstChild = parentElement.firstChild;

Code language: JavaScript (javascript)

If the parentElement does not have any child element, the firstChild returns null.

The firstChild property returns a child node which can be any node type such as an
element node, a text node, or a comment node. The following script shows the first
child of the #menu element:

let content = document.getElementById('menu');

let firstChild = content.firstChild.nodeName;
console.log(firstChild);
Code language: JavaScript (javascript)

Output:

#text
Code language: CSS (css)

The Console window show #text because a text node is inserted to maintain the

whitespace between the openning <ul> and <li> tags. This whitespace creates
a #text node.

Note that any whitespace such as a single space, multiple spaces, returns, and tabs
will create a #text node. To remove the #text node, you can remove the whitespaces
as follows:

<article id="content"><h2>Heading</h2><p>First
paragraph</p></article>
Code language: HTML, XML (xml)

Or to get the first child with the Element node only, you can use
the firstElementChild property:

let firstElementChild = parentElement.firstElementChild;

Code language: JavaScript (javascript)

The following code returns the first list item which is the first child element of the
menu:

let content = document.getElementById('menu');

console.log(content.firstElementChild);
Code language: JavaScript (javascript)

Output:

<li class="first">Home</li>
Code language: HTML, XML (xml)

In this example:
  First, select the #menu element by using the getElementById() method.
 Second,  get the first child element by using the firstElementChild property.

Get the last child element

To get the last child element of a node, you use the lastChild property:

let lastChild = parentElement.lastChild;

Code language: JavaScript (javascript)

In case the parentElement does not have any child element, the lastChild returns null.

Similar to the the firstChild property, the lastChild property returns the first element
node, text node, or comment node. If you want to select only the last child element
with the element node type, you use the lastElementChild property:

let lastChild = parentElement.lastElementChild;

Code language: JavaScript (javascript)

The following code returns the list item which is the last child element of the menu:

let menu = document.getElementById('menu');

console.log(main.lastElementChild);
Code language: JavaScript (javascript)

Output:

<li class="last">About Us</li>

Code language: HTML, XML (xml)

Get all child elements

To get a live NodeList of child elements of a specified element, you use
the childNodes property:

let children = parentElement.childNodes;

Code language: JavaScript (javascript)

The childNodes property returns all child elements with any node type. To get the
child element with only the element node type, you use the children property:

let children = parentElement.children;

Code language: JavaScript (javascript)

The following example selects all child elements of the element with the Id main:
let menu = document.getElementById('menu');
let children = menu.children;
console.log(children);
Code language: JavaScript (javascript)

Output:

Summary
 The firstChild and lastChild return the first and last child of a node, which can be
any node type including text node, comment node, and element node.
 The firstElementChild and lastElementChild return the first and last child Element
node.
 The childNodes returns a live NodeList of all child nodes of any node type of a
specified node. The children return all child Element nodes of a specified
node.

JavaScript CreateElement
Summary: in this tutorial, you will learn how to use the
JavaScript document.createElement() to create a new HTML element and attach it to the
DOM tree.

To create an HTML element, you use the document.createElement() method:

let element = document.createElement(htmlTag);

Code language: JavaScript (javascript)

The document.createElement() accepts an HTML tag name and returns a new Node with

the Element type.
1) Creating a new div example
Suppose that you have the following HTML document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>
Code language: HTML, XML (xml)

The following example uses the document.createElement() to create a new <div> element:

let div = document.createElement('div');

Code language: JavaScript (javascript)

And add an HTML snippet to the div:

div.innerHTML = '<p>CreateElement example</p>';

Code language: HTML, XML (xml)

To attach the div to the document, you use the appendChild() method:

document.body.appendChild(div);
Code language: CSS (css)

Put it all together:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>
<script>
let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);
</script>
</body>
</html>
Code language: HTML, XML (xml)

Adding an id to the div

If you want to add an id to a div, you set the id attribute of the element to a value,
like this:

let div = document.createElement('div');

div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';

document.body.appendChild(div);
Code language: JavaScript (javascript)

Adding a class to the div

The following example set the CSS class of a new div note:

let div = document.createElement('div');

div.id = 'content';
div.className = 'note';
div.innerHTML = '<p>CreateElement example</p>';

document.body.appendChild(div);
Code language: JavaScript (javascript)

Adding text to a div

To add a piece of text to a <div>, you can use the innerHTML property as the above
example, or create a new Text node and append it to the div:

// create a new div and set its attributes

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';

// create a new text node and add it to the div

let text = document.createTextNode('CreateElement example');
div.appendChild(text);

// add div to the document

document.body.appendChild(div);
Code language: JavaScript (javascript)
Adding an element to a div

To add an element to a div, you create an element and append it to the div using

the appendChild() method:

let div = document.createElement('div');

div.id = 'content';
div.className = 'note';

// create a new heading and add it to the div

let h2 = document.createElement('h2');
h2.textContent = 'Add h2 element to the div';
div.appendChild(h2);

// add div to the document

document.body.appendChild(div);
Code language: JavaScript (javascript)

2) Creating new list items ( li) example

Let’s say you have a list of items:

<ul id="menu">
<li>Home</li>
</ul>
Code language: HTML, XML (xml)

The following code adds two li elements to the ul:

let li = document.createElement('li');
li.textContent = 'Products';
menu.appendChild(li);

li = document.createElement('li');
li.textContent = 'About Us';

// select the ul menu element

const menu = document.querySelector('#menu');
menu.appendChild(li);
Code language: JavaScript (javascript)

Output:

<ul id="menu">
<li>Home</li>
<li>Products</li>
 <li>About Us</li>
</ul>
Code language: HTML, XML (xml)

3) Creating a script element example

Sometimes, you may want to load a JavaScript file dynamically. To do this, you can
use the document.createElement() to create the script element and add it to the document.

The following example illustrates how to create a new script element and loads

the /lib.js file to the document:

let script = document.createElement('script');

script.src = '/lib.js';
document.body.appendChild(script);
Code language: JavaScript (javascript)

You can first create a new helper function that loads a JavaScript file from an URL:

function loadJS(url) {
let script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
Code language: JavaScript (javascript)

And then use the helper function to load the /lib.js file:

loadJS('/lib.js');
Code language: JavaScript (javascript)

To load a JavaScript file asynchronously, you set the async attribute of

the script element to true:

function loadJSAsync(url) {
let script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
}
Code language: JavaScript (javascript)

Summary
 The document.createElement() creates a new HTML element.
  The element.appendChild() appends an HTML element to an existing element.

JavaScript appendChild
Summary: in this tutorial, you will learn how to use the
JavaScript appendChild() method to add a node to the end of the list of child nodes of
a specified parent node.

Introduction to the JavaScript appendChild() method

The appendChild() is a method of the Node interface. The appendChild() method allows
you to add a node to the end of the list of child nodes of a specified parent node.

The following illustrates the syntax of the appendChild() method:

parentNode.appendChild(childNode);
Code language: CSS (css)

In this method, the childNode is the node to append to the given parent node.
The appendChild() returns the appended child.

If the childNode is a reference to an existing node in the document,

the appendChild() method moves the childNode from its current position to the new
position.

JavaScript appendChild() examples
Let’s take some examples of using the appendChild() method.

1) Simple appendChild() example

Suppose that you have the following HTML markup:

<ul id="menu">
</ul>
Code language: HTML, XML (xml)

The following example uses the appendChild() method to add three list items to

the <ul> element:

function createMenuItem(name) {
 let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
Code language: JavaScript (javascript)

How it works:

 First, the createMenuItem() function create a new list item element with a

specified name by using the createElement() method.
 Second, select the <ul> element with id menu using the querySelector() method.
 Third, call the createMenuItem() function to create a new menu item and use
the appendChild() method to append the menu item to the <ul> element

Output:

<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
</ul>
Code language: HTML, XML (xml)

Put it all together:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>JavaScript appendChild() Demo</title>
</head>
<body>
<ul id="menu">
</ul>

<script>
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
 return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
</script>
</body>
</html>
Code language: HTML, XML (xml)

2) Moving a node within the document example

Assuming that you have two lists of items:

<ul id="first-list">
<li>Everest</li>
<li>Fuji</li>
<li>Kilimanjaro</li>
</ul>

<ul id="second-list">
<li>Karakoram Range</li>
<li>Denali</li>
<li>Mont Blanc</li>
</ul>
Code language: HTML, XML (xml)

The following example uses the appendChild() to move the first child element from
the first list to the second list:

// get the first list

const firstList = document.querySelector('#first-list');
// take the first child element
const everest = firstList.firstElementChild;
// get the second list
const secondList = document.querySelector('#second-list');
// append the everest to the second list
secondList.appendChild(everest)
Code language: JavaScript (javascript)

How it works:

 First, select the first element by its id (first-list) using the querySelector() method.

  Second, select the first child element from the first list.
 Third, select the second element by its id (second-list) using
the querySelector() method.
 Finally, append the first child element from the first list to the second list
using the appendChild() method.

Here are the list before and after moving:

Summary
 Use appendChild() method to add a node to the end of the list of child nodes
of a specified parent node.
 The appendChild() can be used to move an existing child node to the new
position within the document.

JavaScript textContent
Summary: in this tutorial, you will learn how to use the
JavaScript textContent property to get the text content of a node and its descendants.

Reading textContent from a node
To get the text content of a node and its descendants, you use
the textContent property:

let text = node.textContent;

Code language: JavaScript (javascript)
Suppose that you have the following HTML snippet:

<div id="note">
JavaScript textContent Demo!
<span style="display:none">Hidden Text!</span>
<!-- my comment -->
</div>
Code language: HTML, XML (xml)

The following example uses the textContent property to get the text of

the <div> element:

let note = document.getElementById('note');

console.log(note.textContent);
Code language: JavaScript (javascript)

How it works.

 First, select the div element with the id note by using

the getElementById() method.
 Then, display the text of the node by accessing the textContent property.

Output:

JavaScript textContent Demo!

Hidden Text!

As you can see clearly from the output, the textContent property returns the
concatenation of the textContent of every child node, excluding comments (and also
processing instructions).

textContent vs. innerText

On the other hand, the innerText takes the CSS style into account and returns only
human-readable text. For example:

let note = document.getElementById('note');

console.log(note.innerText);
Code language: JavaScript (javascript)

Output:

JavaScript textContent Demo!

As you can see, the hidden text and comments are not returned.
Since the innerText property uses the up-to-date CSS to compute the text, accessing
it will trigger a reflow, which is computationally expensive.

A reflow occurs when a web brower needs to process and draw parts or all of a
webpage again.

Setting textContent for a node
Besides reading textContent, you can also use the textContent property to set the text for
a node:

node.textContent = newText;

When you set textContent on a node, all the node’s children will be removed and
replaced by a single text node with the newText value. For example:

let note = document.getElementById('note');

note.textContent = 'This is a note';
Code language: JavaScript (javascript)

Summary
 Use the textContent property to return the concatenation of the textContent of
every child node. You can use it to set a text for a node.
 The innerText returns the human-readable text that takes CSS into account.

JavaScript innerHTML
Summary: in this tutorial, you will learn how to use the
JavaScript innerHTML property of an element to get or set an HTML markup
contained in the element.

The innerHTML is a property of the Element that allows you to get or set the HTML

markup contained within the element.

Reading the innerHTML property of an element

To get the HTML markup contained within an element, you use the following
syntax:

let content = element.innerHTML;

Code language: JavaScript (javascript)

When you read the innerHTML of an element, the web browser has to serialize the
HTML fragment of the element’s descendants.

1) Simple innerHTML example

Suppose that you have the following markup:

<ul id="menu">
<li>Home</li>
<li>Services</li>
</ul>
Code language: HTML, XML (xml)

The following example uses the innerHTML property to get the content of

the <ul> element:

let menu = document.getElementById('menu');

console.log(menu.innerHTML);
Code language: JavaScript (javascript)

How it works:

 First, select the <ul> element by its id (menu) using the getElementById() method.

 Then, get the HTML content of the <ul> element using the innerHTML.

Output:

<li>Home</li>
<li>Services</li>
Code language: HTML, XML (xml)

2) Examining the current HTML source

The innerHTML property returns the current HTML source of the document, including

all changes have been made since the page was loaded.

See the following example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript innerHTML</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Services</li>
</ul>
<script>
let menu = document.getElementById('menu');

// create new li element

let li = document.createElement('li');
li.textContent = 'About Us';
// add it to the ul element
menu.appendChild(li);

console.log(menu.innerHTML);
</script>
</body>
</html>
Code language: HTML, XML (xml)

Output:

<li>Home</li>
<li>Services</li>
<li>About Us</li>
Code language: HTML, XML (xml)

How it works.

 First, get the <ul> element with the id menu using the getElementById() method.

 Second, create a new <li> element and add it to the <ul> element using
the createElement() and appendChild() methods.
 Third, get the HTML of the <ul> element using the innerHTML property of
the <ul> element. The contents of the <ul> element includes the initial content
and the dynamic content created by JavaScript.

Setting the innerHTML property of an element

To set the value of innerHTML property, you use this syntax:
element.innerHTML = newHTML;

The setting will replace the existing content of an element with the new content.

For example, you can remove the entire contents of the document by clearing
contents of the document.body element:

document.body.innerHTML = '';
Code language: JavaScript (javascript)

⚠️Security Risk

HTML5 specifies that a <script> tag inserted with innerHTML should not execute.
See the following example:

index.html document:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>JavaScript innerHTML</title>
</head>

<body>
<div id="main"></div>
<script src="app.js"></script>
</body>

</html>
Code language: HTML, XML (xml)

app.js

const main = document.getElementById('main');

const scriptHTML = '<script>alert("Alert from

innerHTML");</script>';
main.innerHTML = scriptHTML;
Code language: JavaScript (javascript)

In this example, the alert() inside the <script> tag will not execute.

However, if you change source code of the app.js to the following:

const main = document.getElementById('main');

const externalHTML = `<img src='1' onerror='alert("Error

loading image")'>`;
// shows the alert
main.innerHTML = externalHTML;
Code language: JavaScript (javascript)

The alert() will show because the image cannot be loaded successfully. It causes

the onerror handler executes. And this handler can execute any malicious code, not
just a simple alert.

Therefore, you should not set the innerHTML to the content that you have no control
over or you will face a potential security risk.

Because of this, if you want to insert plain text into the document, you use
the textContent property instead of the innerHTML. The textContent will not be parsed as
the HTML, but as the raw text.

Summary
 Use innerHTML property of an element to get or set HTML contained within
the element.
 The innerHTML property returns the current HTML source of the element,
including any change that has been made since the page was loaded.
 Do not use innerHTML to set new content that you have no control over to
avoid a security risk.

 Summary: in this tutorial, you’ll learn the difference between

the innerHTML and createElement() when it comes to creating new elements in
the DOM tree.

 #1) createElement is more performant

 Suppose that you have a div element with the class container:

 <div class="container"></div>
 Code language: HTML, XML (xml)

 You can new elements to the div element by creating an element and

appending it:
 let div = document.querySelector('.container');

 let p = document.createElement('p');
 p.textContent = 'JS DOM';
 div.appendChild(p);
 Code language: JavaScript (javascript)

 You can also manipulate an element’s HTML directly using innerHTML like

this:

 let div = document.querySelector('.container');

 div.innerHTML += '<p>JS DOM</p>';
 Code language: JavaScript (javascript)

 Using innerHTML is cleaner and shorter when you want to add attributes to

the element:

 let div = document.querySelector('.container');

 div.innerHTML += '<p class="note">JS DOM</p>';
 Code language: JavaScript (javascript)

 However, using the innerHTML causes the web browsers to reparse and

recreate all DOM nodes inside the div element. Therefore, it is less efficient
than creating a new element and appending to the div. In other words,
creating a new element and appending it to the DOM tree provides better
performance than the innerHTML.

 #2) createElement is more secure

 As mentioned in the innerHTML tutorial, you should use it only when the
data comes from a trusted source like a database.

 If you set the contents that you have no control over to the innerHTML, the
malicious code may be injected and executed.

 #3) Using DocumentFragment for composing

DOM Nodes
 Assuming that you have a list of elements and you need in each iteration:

 let div = document.querySelector('.container');


 for (let i = 0; i < 1000; i++) {
  let p = document.createElement('p');
 p.textContent = `Paragraph ${i}`;
 div.appendChild(p);
 }
 Code language: JavaScript (javascript)

 This code results in recalculation of styles, painting, and layout every

iteration. This is not very efficient.

 To overcome this, you typically use a DocumentFragment to compose DOM

nodes and append it to the DOM tree:

 let div = document.querySelector('.container');


 // compose DOM nodes
 let fragment = document.createDocumentFragment();
 for (let i = 0; i < 1000; i++) {
 let p = document.createElement('p');
 p.textContent = `Paragraph ${i}`;
 fragment.appendChild(p);
 }

 // append the fragment to the DOM tree
 div.appendChild(fragment);
 Code language: JavaScript (javascript)

 In this example, we composed the DOM nodes by using

the DocumentFragment object and append the fragment to the active DOM tree
once at the end.

 A document fragment does not link to the active DOM tree, therefore, it
doesn’t incur any performance.

 Check it out the DocumentFragment tutorial for more detail.

JavaScript DocumentFragment
Summary: in this tutorial, you’ll learn about the JavaScript DocumentFragment interface
to compose DOM nodes and update them to the active DOM tree.
Introduction to the JavaScript DocumentFragment
interface
The DocumentFragment interface is a lightweight version of the Document that stores a
piece of document structure like a standard document. However,
a DocumentFragment isn’t part of the active DOM tree.

If you make changes to the document fragment, it doesn’t affect the document or
incurs any performance.

Typically, you use the DocumentFragment to compose DOM nodes and append or

insert it to the active DOM tree using appendChild() or insertBefore() method.

To create a new document fragment, you use the DocumentFragment constructor like

this:

let fragment = new DocumentFragment();

Code language: JavaScript (javascript)

Or you can use the createDocumentFragment() method of the Document object:

let fragment = document.createDocumentFragment();

Code language: JavaScript (javascript)

This DocumentFragment inherits the methods of its parent, Node, and also implements

those of the ParentNode interface such as querySelector() and querySelectorAll().

JavaScript DocumentFragment example

Suppose that you have a <ul> element with the id language:
<ul id="language"></ul>
Code language: HTML, XML (xml)

The following code creates a list of <li> elements (<li>) and append each to
the <ul> element using the DocumentFragment:

let languages = ['JS', 'TypeScript', 'Elm', 'Dart','Scala'];

let langEl = document.querySelector('#language')

let fragment = new DocumentFragment();

languages.forEach((language) => {
let li = document.createElement('li');
li.innerHTML = language;
fragment.appendChild(li);
})

langEl.appendChild(fragment);
Code language: JavaScript (javascript)

How it works:

 First, select the <ul> element by its id using the querySelector() method.

 Second, create a new document fragment.
 Third, for each element in the languages array, create a list item element,
assign the list item’s innerHTML to the language, and append all the newly
created list items to the document fragment.
 Finally, append the document fragment to the <ul> element.

Put it all together:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>DocumentFragment Demo</title>
</head>
<body>
<ul id="language"></ul>

<script>
let languages = ['JS', 'TypeScript', 'Elm', 'Dart',
'Scala'];
 let langEl = document.querySelector('#language');
let fragment = new DocumentFragment();

languages.forEach((language) => {
let li = document.createElement('li');
li.innerHTML = language;
fragment.appendChild(li);
})

langEl.appendChild(fragment);
</script>

</body>
</html>
Code language: HTML, XML (xml)

Summary
 Use the DocumentFragment to compose DOM nodes before updating them to
the active DOM tree to get better performance.

JavaScript insertBefore

Summary: in this tutorial, you will learn how to use the JavaScript insertBefore() to
insert a node before another node as a child node of a specified parent node.

Introduction to JavaScript insertBefore() method
To insert a node before another node as a child node of a parent node, you use
the parentNode.insertBefore() method:

parentNode.insertBefore(newNode, existingNode);
Code language: CSS (css)

In this method:

 The newNode is the new node to be inserted.

  The existingNode is the node before which the new node is inserted. If
the existingNode is null, the insertBefore() inserts the newNode at the end of
the parentNode‘s child nodes.

The insertBefore() returns the inserted child node.

JavaScript insertBefore() helper function
The following insertBefore() function inserts a new node before a specified node:

function insertBefore(newNode, existingNode) {

existingNode.parentNode.insertBefore(newNode,
existingNode);
}
Code language: JavaScript (javascript)

JavaScript insertBefore() example
Suppose that you have the following list of items:

<ul id="menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
Code language: HTML, XML (xml)

The following example uses the insertBefore() method to insert a new node as the first
list item:

let menu = document.getElementById('menu');

// create a new li node
let li = document.createElement('li');
li.textContent = 'Home';

// insert a new node before the first list item

menu.insertBefore(li, menu.firstElementChild);
Code language: JavaScript (javascript)

How it works.

 First, get the menu element using the getElementById() method.

 Second, create a new list item using the createElement() method.
  Third, insert the list item element before the first child element of
the menu element using the insertBefore() method.

Put it all together.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>JavaScript insertBefore()</title>
</head>

<body>
<ul id="menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Home';

// insert a new node before the first list item

menu.insertBefore(li, menu.firstElementChild);
</script>
</body>

</html>
Code language: HTML, XML (xml)

Summary
 Use the parentNode.insertBefore() to insert a new node before an existing node as
a child node of a parent node.

JavaScript insertAfter
Summary: in this tutorial, you will learn how to insert a new node after an existing
node as a child node of a parent node.
JavaScript DOM provides the insertBefore() method that allows you to insert a new
after an existing node as a child node. However, it hasn’t supported
the insertAfter() method yet.

To insert a new node after an existing node as a child node, you can use the
following approach:

 First, select the next sibling node of the existing node.

 Then, select the parent node of the existing node and call
the insertBefore() method on the parent node to insert a new node before that
immediate sibling node.

The following insertAfter() function illustrates the logic:

function insertAfter(newNode, existingNode) {

existingNode.parentNode.insertBefore(newNode,
existingNode.nextSibling);
}
Code language: JavaScript (javascript)

Suppose that you have the following list of items:

<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
Code language: HTML, XML (xml)

The following snippet inserts a new node after the first list item:

let menu = document.getElementById('menu');

// create a new li node
let li = document.createElement('li');
li.textContent = 'Services';

// insert a new node after the first list item

menu.insertBefore(li, menu.firstElementChild.nextSibling);
Code language: JavaScript (javascript)

How it works:

 First, select the ul element by its id (menu) using the getElementById() method.

 Second, create a new list item using the createElement() method.
  Third, use the insertBefore() method to insert the list item element before the
next sibling of the first list item element.

Put it all together.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>JavaScript insertAfter() Demo</title>
</head>

<body>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Services';

// insert a new node after the first list item

menu.insertBefore(li,
menu.firstElementChild.nextSibling);
</script>
</body>

</html>
Code language: HTML, XML (xml)

Summary
 JavaScript DOM hasn’t supported the insertAfter() method yet.
 Use the insertBefore() method and the nextSibling property to insert a new before
an existing node as a child of a parent node.

https://www.javascripttutorial.net/javascript-dom/javascript-insertadjacenthtml/