How to create HTML elements?, it’s possible to add them dynamically using Javascript. Here are the instructions.
HTML language is the default language used for the client in web development, it is an interpreted language, that is, it is not compiled and translated at runtime.
Javascript is another web language at the client level, with the additional advantage of executing more functions and even operations, and therefore it is essential for the execution of functions in the web client.
How to add HTML elements with Javascript?
We will analyze how to create some HTML elements using Javascript. It is important to note that by including Javascript code inside an HTML we write the code between: <script> Javascript code </script>
document.createElement(): This method is quite useful for all those cases in which you want to create a new HTML element in an existing document. The method is quite useful in situations where you want to modify a document by adding more nodes. Therefore, if it is necessary to create a new div element to meet some commercial requirements, the following method is used:
var div = document.createElement('div');
document.getElementById(): Most web developers consider this method as a close friend. It is used to access any node of the document for which an identifier has been specified. Returns an object of type HTML <Element Name> Element, which represents the element identified by the mentioned identifier. So, for example, in case you have to change some color attribute of the element, you can use this method. The use of this method is the one shown in the following code snippet:
var div = document.getElementById("some-div-id");
div.style.color = 'red';
Similarly, if the interval is selected, the name of the object would be
Then, the value contained in the variable div is an object of the HTMLSpanElement class, and so on.
document.getElementsByClassName(): This method is used to obtain a list of HTML elements from the web page that have a CSS class name specified as their attribute. The method returns an object that represents the NodeList class. The NodeList object can be traversed to obtain all available HTML elements, with some specified CSS class. The use of this method is as follows:
var classElements = document.getElementsByClassName("some-css-class");
classElements[0].style.color = 'red'; // Replace text color
document.getElementsByTagName(): Similar to getElementsByClassName, this method provides a list of HTML elements on the rendered web page that have a specified tag name. Tag Name is the name of the HTML tag that is present in the nodes in the DOM tree. So, to make all the color of the text within all the divs on the represented web page red, I would have to do something like the following:
var tagElements = document.getElementsByTagName("div");
tagElements[0].style.color = 'red';
document.getElementsByName(): The HTML and select input tag have a name attribute, which acts as an index of data that is passed from one page to another through HTTP request methods such as GET or POST. Therefore, the document object allows this method, document.getElementsByName, to access any element that has the name attribute as a specified value. To change the text within all the elements that have the name attribute as username to the color red, you can use the following code snippet:
var nameElement = document.getElementsByName("username");
nameElement.style.color = "red";
document.write(): The writing method provided by the document object allows you to write a string or several strings in the output sequence, which is the web browser. You can pass a single string as an argument to this method or a sequence of strings to this method. The strings will be sent to the sequence in the order in which they were passed as arguments. You can also generate HTML tags, using this method. Therefore, if you must write some HTML in your web browser, you can use the following code snippet:
document.write("What is JavaScript?");
document.write("<p>
How to work with JavaScript? ","
What is jQuery? </p>");
document.write("<div> Hello World </div>");