The following example code demonstrates How to Add a Bulleted List in a Paragraph Using JavaScript.
Since we need to create the entire bulleted list on the click of a button, we need to create several elements using the createChild() method. Therefore, first we need to create a ‘UL’ element. After that, we need to create the required number of ‘LI’ elements. Also, the createTextNode() method creates the text of a specific ‘LI’ element. Further, the appendChild() method is used to append the text to its respective ‘LI’ element. Then, we use to add each ‘LI’ element to the list. Finally, we use the appendChild() method to append the list to the paragraph.
So, each time the user clicks the button, the same list is added to the paragraph. The following example shows the JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript createElement</title>
<script>
function addList()
{
var para=document.getElementById('p1');
str1='A';
str2='B';
str3='C';
var list1=document.createElement('UL');
var item=document.createElement('LI');
var text=document.createTextNode(str1);
item.appendChild(text);
list1.appendChild(item);
var item=document.createElement('LI');
var text=document.createTextNode(str2);
item.appendChild(text);
list1.appendChild(item);
var item=document.createElement('LI');
var text=document.createTextNode(str3);
item.appendChild(text);
list1.appendChild(item);
para.appendChild(list1);
}
function removeList()
{
}
</script>
<body>
<p id='p1'></p>
<button onclick="addList()">Add Bulleted List</button>
</body>
</html>
Output

In order to create a bulleted list with a specific ID, click on the following link.
Add a Bulleted List with a Specific ID
Further Reading
Evolution of JavaScript from ES1 to ES2020
Introduction to HTML DOM Methods in JavaScript
Creating Classes in JavaScript
- AI
- Android
- Angular
- ASP.NET
- Augmented Reality
- AWS
- Bioinformatics
- Biometrics
- Blockchain
- Bootstrap
- C
- C#
- C++
- Cloud Computing
- Competitions
- Courses
- CSS
- Cyber Security
- Data Science
- Data Structures and Algorithms
- Data Visualization
- Datafication
- Deep Learning
- DevOps
- Digital Forensic
- Digital Trust
- Digital Twins
- Django
- Docker
- Dot Net Framework
- Drones
- Elasticsearch
- ES6
- Extended Reality
- Flutter and Dart
- Full Stack Development
- Git
- Go
- HTML
- Image Processing
- IoT
- IT
- Java
- JavaScript
- Kotlin
- Latex
- Machine Learning
- MEAN Stack
- MERN Stack
- Microservices
- MongoDB
- NodeJS
- PHP
- Power Bi
- Projects
- Python
- Quantum Computing
- React
- Robotics
- Rust
- Scratch 3.0
- Shell Script
- Smart City
- Software
- Solidity
- SQL
- SQLite
- Tecgnology
- Tkinter
- TypeScript
- VB.NET
- Virtual Reality
- Web Designing
- WebAssembly
- XML
