JS Dom manipulation interview question

xw19 Published on: 2019-04-06

I was given a task to create un ordered list and li items from an array such that when clicked on the item it will print the text value in the console. So, here is my solution.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Testing</h1>
    <div id="abcd">Hello</div>
    <script>
            (function(){
             let entry = document.querySelector("#abcd")
             let ulitem = document.createElement("ul")
             const arr = ['a', 'b', 'c', 'd']
             arr.forEach(i => {
                 const li = document.createElement("li")
                 li.innerHTML = i
                 li.addEventListener('click', (event) => {
                     console.log(event.target.innerHTML);
                 })
                 ulitem.appendChild(li)
             })
             entry.appendChild(ulitem);
            })();
         </script>
</body>
</html>