Advanced Search

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.

Expand | Embed | Plain Text

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.