Posted By

mavrikicecool on 01/11/11


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

wirenaught


Manipulate list items add or replace


 / Published in: JavaScript
 

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

  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  

You need to login to post a comment.