The process of Update HTML list Dynamically using Javascript involves modifying the content of the list dynamically based on the provided data. Here is a description of the steps involved:
HTML Structure: To begin, you need to set up the HTML structure where the list will be displayed. In this case, an ordered list <ol> element with a specific ID is used. This ID will be used to target the list in JavaScript for manipulation.
Set up the HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Update HTML list Dynamically using Javascript</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<style>
.content{
margin-top: 100px;
background: white;
}
ol>li{
font-size:16px;
}
.form-inline{
margin-top: 58px;
padding: 15px;
}
.el{
cursor:pointer;
}
</style>
</head>
<body onload="initFunc();">
<div class="col-md-3"></div>
<div class="col-md-6 well content">
<h3 class="text-success text-center">How to Update HTML list Dynamically using Javascript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-6">
<h3>My Favorite Movies</h3>
<ol id="result"></ol>
</div>
<div class="col-md-6">
<form action="javascript:void(0);" method="POST" class="form-inline" id="update">
<input type="text" id="movie_title" class="form-control"/>
<br /><br />
<button type="submit" id="btn_update" class="btn btn-success"><span class="glyphicon glyphicon-update"></span> Update</button>
<button type="button" class="btn btn-danger" id="btn_cancel" onclick="removeAll()">Cancel</button>
</form>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
JavaScript Code: JavaScript is used to update the list dynamically. Firstly, you retrieve the <ol> element using its ID and store it in a variable. Then, you clear the existing list by setting its innerHTML property to an empty string.
Write JavaScript code to update the list dynamically:
var movie_titles = ["Iron Man", "Superman", "Spiderman", "The Godfather", "Seven Samurai", "Chinatown"];
function initFunc(){
displayAll();
removeAll();
}
function displayAll() {
var data = '';
if (movie_titles.length > 0) {
for (i = 0; i < movie_titles.length; i++) {
data += '<li>' + movie_titles[i] + ' <span class="glyphicon glyphicon-edit text-danger el" onclick="Edit(' + i + ')"></span></li>';
}
}
document.getElementById('result').innerHTML = data;
};
function removeAll() {
document.getElementById('movie_title').style.display="none";
document.getElementById('movie_title').value="";
document.getElementById('btn_update').style.display="none";
document.getElementById('btn_cancel').style.display="none";
}
function Edit(item) {
var el = document.getElementById('movie_title');
el.value = movie_titles[item];
document.getElementById('movie_title').style.display="inline-block";
document.getElementById('btn_update').style.display="inline-block";
document.getElementById('btn_cancel').style.display="inline-block";
self = this;
document.getElementById('update').onsubmit = function() {
var name = el.value;
if (name) {
self.movie_titles.splice(item, 1, name.trim());
self.displayAll();
removeAll();
}
}
};
In the provided JavaScript code, the list items are stored in an array called movie_titles . The code dynamically creates <li> elements for each item in the array and appends them to the <ol> element with the ID result.
Finally, by calling the Edit() function, the list will be populated dynamically with the items in the array. You can modify the items array to include your desired list items.
Screenshot
