How to Add HTML Elements into DOM through JavaScript Code

-

 We all might have encountered the case where we need to insert the HTML elements through JavaScript code as part of some event handling. This is called as dynamic addition of UI Controls from the code.

Significance of DOM(Document Object Model)

In JavaScript world its relatively easy to add any html control to the DOM (Document Object Model). For the control to be visible in the UI it has to be added to the DOM.

We will see now an example of how this can be done. This requires some basic understanding of the HTML and the JavaScript.

Lets see the existing HTML DOM structure where we would try to insert a custom element.

Chat message DOM

As shown above we have a div block which is labelled as "chat-messages". We will try to insert the custom html code into this block as shown in the figure below:

JavaScript code to insert HTML code

As shown in the figure above we have defined a function showMessagesInChat whose responsibility is to insert HTML code into the chat-messages div block.

In the first line of the JavaScript code we have created a div element using the API document.createElement(<Name of the Element>). Then add a class name to the added div block which is labelled as message in this case.

Then the main portion is to define the html code which would reside inside the div block. Here we can write our own HTML code and assign it to the innerHTML property of the div block. To allow for multiple lines in the HTML code we can use the operator `.

We can also embed dynamic values in this html code with the use of $ operator.

Finally once we are done with the html code we can add it to the DOM structure as shown in the last line of the function. It retrieves the DOM structure and finds the element  provided as a parameter to the querySelector API and call appendChild passing inn the element we want to insert to the DOM.  

Comments

Post a Comment

Popular posts from this blog

Creating RESTful Minimal WebAPI in .Net 6 in an Easy Manner! | FastEndpoints

-
Image
  We might have developed Web APIs using MVC Controllers where we used to give Route Path Attributes to the Controller and  to identify individual methods we used to provide Actions in the Route. With the Controller approach we need to write boiler plate code in separate files which deals with the Configuration of the Web Service. Those who have worked in Node js would be aware of how easy it is to create a Web API and expose different Endpoints without the need of so much boiler plate code. Here we are going to discuss of similar approach for creating a Web API in .Net6 using FastEndpoints. Under the hood it uses Minimal API concept which tries to reduce the dependencies required to achieve a particular task. This approach is more suitable in the case of Microservice Architecture where we want to keep the dependencies to minimum. Must Read : Fluent API and Data Annotations What are FastEndpoints? FastEndpoints is a Framework compatible with .Net 6 which allows to build a...
Read more

Step By Step Guide to Detect Heap Corruption in Windows Easily

-
Image
Introduction Heap memory corruption is a critical issue that can lead to application crashes, data loss, and even security vulnerabilities. Detecting and addressing heap memory corruption early is crucial for maintaining the stability and security of Windows applications. In this blog post, we will explore how to detect heap memory corruption using two powerful tools: DebugDiag and AppVerifier. Must Read : synchronization in C++20 . Understanding Heap Memory Corruption Heap memory is a dynamically allocated memory space used by applications to store data at runtime. Heap memory corruption occurs when an application writes data beyond the allocated memory boundaries , leading to memory leaks, crashes, and unpredictable behavior. Detecting such corruption manually can be time-consuming and complex, making automated tools invaluable for identifying and diagnosing these issues. What is PageHeap? PageHeap specifically focuses on detecting heap-related problems, like heap overflows, heap und...
Read more

How to dynamically add Properties in C# .NET?

-
Image
There are certain situations where we have to create object dynamically with properties added to the object dynamically. Data related to these properties may be coming in from external sources like a file or from any other serialized format. We can achieve this with the help of reflection, but it is bit complex and should have some prior knowledge of Reflection. What is meant by Dynamic Creation of Properties in c#? Dynamic creation of properties means at the time of writing the code, programmer is not aware of the properties which can be part of the object and its value. For Example there may be some data which needs to be read from say xml file, In this case there should be some organized way by which we can represent the data, This can be in the form of a object. Content of this object and the properties cannot be deduced while writing the application, it needs to be constructed from the xml file which is read when the application runs. Expando Object Expando Object comes to the res...
Read more