OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <html> |
| 4 <body> |
| 5 <ol> |
| 6 <li>One</li> |
| 7 <li>Two</li> |
| 8 </ol> |
| 9 |
| 10 <script type="application/dart"> |
| 11 |
| 12 import 'dart:html'; |
| 13 |
| 14 void main() { |
| 15 |
| 16 var ol = query('ol'); |
| 17 ol.insertAdjacentHtml('beforeBegin', '<p>Starting the ol</p>'); |
| 18 ol.insertAdjacentHtml('afterEnd', '<p>Done with the ol</p>'); |
| 19 |
| 20 |
| 21 UListElement ul = new Element.tag('ul'); |
| 22 |
| 23 // Append using element.append() |
| 24 ul.append(new Element.html('<li>One</li>')); |
| 25 |
| 26 // Append using element.appendHtml() |
| 27 ul.appendHtml('<li>Two</li>'); |
| 28 |
| 29 // Append using List#add() |
| 30 ul.children.add(new Element.html('<li>Three</li>')); |
| 31 |
| 32 // Append using List#addAll() |
| 33 ul.children.addAll([ |
| 34 new Element.html('<li>Four</li>'), |
| 35 new Element.html('<li>Five</li>') |
| 36 ]); |
| 37 |
| 38 // Inserting in the middle |
| 39 ul.children.insert(1, new Element.html('<li>One And A Half</li>')); |
| 40 |
| 41 // Prepending using list method. |
| 42 ul.children.insert(0, new Element.html('<li>Zero</li>')); |
| 43 // Less good. |
| 44 ul.insertAdjacentHtml('afterBegin', '<li>Less than Zero</li>'); |
| 45 |
| 46 // Append using insertAdjacentHtml() |
| 47 ul.insertAdjacentHtml('beforeEnd', '<li>Last</li>'); |
| 48 |
| 49 // Don't work. |
| 50 ul.insertAdjacentHtml('beforeBegin', '<div>Before the UL</div>'); |
| 51 ul.insertAdjacentHtml('afterEnd', '<div>After the UL</div>'); |
| 52 |
| 53 document.body.children.add(ul); |
| 54 |
| 55 document.body.insertAdjacentHtml('afterBegin', '<p>Starting the body</p>
'); |
| 56 document.body.insertAdjacentHtml('beforeEnd', '<p>Ending the body</p>')
; |
| 57 |
| 58 // insertBefore() // prepend |
| 59 // insertAllBefore() // prepend several |
| 60 } |
| 61 </script> |
| 62 |
| 63 <script src="packages/browser/dart.js"></script> |
| 64 </body> |
| 65 </html> |
OLD | NEW |