JavaScript – Create Ul and LI elements with JS (With chained function)

Posted on January 7, 2016 by

Vitosh Posted in JavaScript, Just Tricks

When you code in JS, there is always some time that you need to create some html list with JS from array or list or something else. I knew the trivial way with a simple for loop, but when I put myself a little deeper into JS, then I found a way to make it with a chained function. What is a chained function? Something that reminds me a lot to Python, but it is still JS. Thus, something like this – array.forEach(function(param){…}.

Thus, if you have an array of elements as I have in the sample code, this is the expected result:

And this is how you obtain it:

<!DOCTYPE HTML>
<html>
	<head>
	</head>
	<body>
		<div id="myList"></div>
		<script type="text/javascript">
		var names = ['vitosh','academy','dot','com'];
		var ul = document.createElement('ul');
		document.getElementById('myList').appendChild(ul);

		names.forEach(function(name){
			var li = document.createElement('li');
			ul.appendChild(li);
			li.innerHTML += name;
		});
		</script>
	</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

var names = ['vitosh','academy','dot','com'];

var ul = document.createElement('ul');

document.getElementById('myList').appendChild(ul);

names.forEach(function(name){

var li = document.createElement('li');

ul.appendChild(li);

li.innerHTML += name;

});

</script>

</body>

</html>

If for any reason you need to locate my code in GitHub, you may click the link.

That is all! 🙂

Tagged with: Create Ul and LI elements with JS

JavaScript – Create Ul and LI elements with JS (With chained function)

Related posts: