Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to return HTML or build HTML using JavaScript?
When building web applications, there are often times when you need to dynamically generate HTML on the client-side. This can be done using JavaScript, and there are different ways to go about it. In this article, we'll show you how to return HTML or build HTML using JavaScript.
Method 1: Returning HTML from a Function
One way to dynamically generate HTML is to return a string of HTML from a function. For example, let's say we have a function that generates a list item:
<!DOCTYPE html>
<html>
<body>
<h2>Returning HTML from Functions</h2>
<script>
function generateListItem(text) {
return '<li>' + text + '</li>';
}
var list = '<ul>';
list += generateListItem('Item 1');
list += generateListItem('Item 2');
list += generateListItem('Item 3');
list += '</ul>';
document.getElementById("result").innerHTML = list;
</script>
</body>
</html>
This approach is simple and works well for generating small pieces of HTML dynamically.
Method 2: Building HTML using DOM Methods
Another way to dynamically generate HTML is to use DOM methods to build the HTML structure. This can be done by creating elements and then adding them to the DOM:
<!DOCTYPE html>
<html>
<body>
<h2>Building HTML using DOM methods</h2>
<p>We create a list by generating HTML elements</p>
<h4 id="child">Tutorials List</h4>
<script>
var list = document.createElement('ul');
var item1 = document.createElement('li');
item1.innerText = 'JavaScript';
list.appendChild(item1);
var item2 = document.createElement('li');
item2.innerText = 'Python';
list.appendChild(item2);
var item3 = document.createElement('li');
item3.innerText = 'Ruby';
list.appendChild(item3);
document.getElementById("result").appendChild(list);
</script>
</body>
</html>
In the above program, we used the createElement method to create an unordered list and list items. The appendChild method is used to add the list items to the list.
Method 3: Building HTML using innerHTML
Another way to build HTML is to use the innerHTML property. This can be done by creating an element and then setting its innerHTML property to a string of HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Building HTML using innerHTML</h2>
List will appear here:
<script>
var list = document.createElement('ul');
list.innerHTML = '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';
document.getElementById("result").appendChild(list);
</script>
</body>
</html>
In the above program, we create a list using the createElement method. The list items are added to the list using the innerHTML property. To display the list we appended it to the div element with id = "result" using appendChild method.
Comparison of Methods
| Method | Performance | Security | Best For |
|---|---|---|---|
| String Concatenation | Fast | Risk of XSS | Simple HTML generation |
| DOM Methods | Slower | Secure | Complex structures, event handling |
| innerHTML | Fast | Risk of XSS | Bulk HTML insertion |
Key Points
- String concatenation is fastest but requires careful handling of user input to prevent XSS attacks
- DOM methods are the most secure and allow precise control over element properties and events
- innerHTML is convenient for bulk HTML insertion but shares security concerns with string concatenation
- Always sanitize user input when building HTML dynamically
Conclusion
JavaScript offers multiple approaches for generating HTML dynamically. Choose DOM methods for security-critical applications, innerHTML for bulk insertion, and string concatenation for simple, trusted content generation.
19K+ Views
