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 −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
   h1{
      font-size: 2.50rem;
   }
   h2, label{
      font-size: 1.50rem;
   }
</style>
</head>
<body>
<h1>Adding Name Demo</h1>
<div>
<label>Enter The Name:</label>
<input class="txtName" type="text" />
<button class="btnName">Save</button>
</div>
<h2>List Of Name</h2>
<ul class="listOfName"></ul>
<script>
   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
         document.querySelector('.listOfName').append(tagLi)
         nameTxt.value = ''
      }
   }
   buttonName.addEventListener('click', addName)
</script>
</body>
</html>

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.

Output

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 −

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