Task using Manipulating Elements

Task 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Services</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        // create new li element
        let li = document.createElement('li');
        li.textContent = 'About Us';
        // add it to the ul element
        menu.appendChild(li);
        console.log(menu.innerHTML);
    </script>
</body>
</html>

Task 2
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<ul id="menu">
    <li>Services</li>   
    <li>About</li>
    <li>Contact</li>
</ul>

    <script>
           let menu = document.getElementById('menu');
           // create a new li node
           let li = document.createElement('li');
           li.textContent = 'Home';

           // insert a new node before the first list item
           menu.insertBefore(li, menu.firstElementChild);

          let newli = document.createElement('li');
          newli.textContent = 'Portfolio';

          // insert a new node after the first list item
           menu.insertBefore(newli, menu.firstElementChild.nextSibling);

          let replace = document.createElement('li');
	  replace.textContent = 'Replace Home';
          menu.replaceChild(replace, menu.firstElementChild);
          menu.removeChild(menu.lastElementChild);
    </script>
</body>
</html>

Task using Manipulating Elements

Task using Manipulating Elements

2 thoughts on “Task using Manipulating Elements”

Post Your Comments & Reviews
Cancel reply