el in JavaScript

1. What Is DOM in JavaScript
2. What Is el in JavaScript

This article will discuss the Document Object Model (DOM), its properties and methods to manipulate the document, and what is el in JavaScript.

What Is DOM in JavaScript

DOM or Document Object Model is a programming interface for Markup Language documents (HTML and XML). It defines the logical structure of documents and how a document is accessible and modified.

DOM presents the web page in a structured and hierarchical manner to make it easier for programmers and users to navigate the document.

With the DOM, we can easily access and manipulate tags, IDs, classes, attributes, or elements using methods or commands provided by the Document object.

HTML is used to structure web pages, and JavaScript allows you to add behavior to your web pages. JavaScript cannot understand the HTML document directly when an HTML file is loaded into the browser.

A corresponding document (DOM) is then created. DOM represents the same HTML document but in a different format using objects.

JavaScript interprets DOM, i.e., JavaScript cannot understand (H1) tags in HTML documents, but it can understand h1 objects in DOM. Now JavaScript can access each object (h1, p, etc.) with different functions.

DOM can be considered a tree or forest (more than one tree). The term structural model is sometimes used to describe the tree-like document representation.

What Is el in JavaScript

Now that we know what DOM is let’s understand how to modify the document through JavaScript. Suppose you want to append a table to the existing body element of a DOM.

$.el.table(
        $.el.tr($.el.th('first name'), $.el.th('last name')),
        $.el.tr($.el.td('John'), $.el.td('Doe')))
    .appendTo(document.body);

In the above code, el refers to the element of a DOM. It’s just an identifier laconic library. It is a JavaScript library.

Further information on the laconic library can be found in this documentation.

The above code is equivalent to this.

$('body').append(
    '<table><tr><th>first name</th><th>last name</th></tr><tr><td>John</td><td>Doe</td></tr></table>');

The difference between appendTo and append is that the append(content) method appends the content of each matching element. In contrast, the appendTo(selector) method adds all matching elements to another specified set of elements.