Manipulate list items add or replace


/ Published in: JavaScript
Save to your folder(s)

small and simple logic for all dotnet, php, java and other web developers, useful for your dynamic processing.


Copy this code and paste it in your HTML
  1. <!--useful snippet for changing the list items and addmore to the existing items,useful for all php,dotnet,java and other web developers-->
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <title>Manipulate List Items</title>
  8. <script type="text/javascript">
  9. function init(){
  10. first = document.getElementById("group1");
  11. last = document.getElementById("group2");
  12. }
  13.  
  14. function ADD(){
  15. var li = document.createElement("li");
  16. var liText = document.createTextNode("sample add");
  17. li.appendChild(liText);
  18. first.appendChild(li);
  19. }
  20.  
  21. function REP(){
  22. first.parentNode.replaceChild(last,first);
  23. first = last;
  24. }
  25. </script>
  26. </head>
  27. <body onload="init()">
  28. <div onclick="ADD()">Add</div>
  29. <div onclick="REP()">Mask</div>
  30. <ol id="group1">
  31. <li>List Item</li>
  32. <li>List Item</li>
  33. <li>List Item</li>
  34. <li>List Item</li>
  35. </ol>
  36. <ul id="group2">
  37. <li>List Item</li>
  38. <li>List Item</li>
  39. <li>List Item</li>
  40. <li>List Item</li>
  41. </ul>
  42. </body>
  43. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.