How would I add a newline in an Unordered List (UL) from JavaScript?

JavascriptWeb DevelopmentObject Oriented Programming

To add a newline in Unordered List, use the document.querySelector().append(). Following is the code −


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
      font-size: 2.50rem;
   h2, label{
      font-size: 1.50rem;
<h1>Adding Name Demo</h1>
<label>Enter The Name:</label>
<input class="txtName" type="text" />
<button class="btnName">Save</button>
<h2>List Of Name</h2>
<ul class="listOfName"></ul>
   const buttonName = document.querySelector('.btnName')
   const addName = e => {
      let nameTxt = document.querySelector('.txtName'),
      name = nameTxt.value.trim()
      if (name) {
         let tagLi = document.createElement('li')
         tagLi.textContent = name
         nameTxt.value = ''
   buttonName.addEventListener('click', addName)

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.


This will produce the following output −

Here, I am entering the value in text box, for example the name is ‘John’ −

After that, click the Save button. After clicking the Save button, output is as follows −

Again, I entered the name ‘Bob’. Now, the updated output is as follows −

After clicking the Save button, the output is as follows −

Published on 03-Sep-2020 09:47:39