| <!DOCTYPE html> |
| <html> |
| <head> |
| <title></title> |
| <script type="text/javascript"> |
| var next = 0; |
| |
| function addVisibleBox() { |
| var box = document.createElement('DIV'); |
| box.id = 'box' + next++; |
| box.className = 'redbox'; |
| box.style.width = '150px'; |
| box.style.height = '150px'; |
| box.style.backgroundColor = 'red'; |
| box.style.border = '1px solid black'; |
| box.style.margin = '5px'; |
| box.style.visibility = 'visible' |
| |
| window.setTimeout(function() { |
| document.body.appendChild(box); |
| }, 1000); |
| } |
| |
| function addHiddenBox() { |
| var box = document.createElement('DIV'); |
| box.id = 'box' + next++; |
| box.className = 'redbox'; |
| box.style.width = '150px'; |
| box.style.height = '150px'; |
| box.style.backgroundColor = 'red'; |
| box.style.border = '1px solid black'; |
| box.style.margin = '5px'; |
| box.style.visibility = 'hidden'; |
| |
| window.setTimeout(function() { |
| document.body.appendChild(box); |
| }, 1000); |
| } |
| </script> |
| </head> |
| <body> |
| <input id="addVisible" type="button" value="Add a visible box!" onclick="addVisibleBox()"/> |
| <input id="addHidden" type="button" value="Add a hidden box!" onclick="addHiddenBox();" /> |
| </body> |
| </html> |
