| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Add Elements to the DOM" | 3 title: "Add Elements to the DOM" |
| 4 description: "You have an Element object, now what?" | 4 description: "You have an Element object, now what?" |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: add-elements | 7 id: add-elements |
| 8 next: remove-elements/ | 8 next: remove-elements/ |
| 9 next-title: "Remove DOM Elements" | 9 next-title: "Remove DOM Elements" |
| 10 prev: connect-dart-html/ | 10 prev: connect-dart-html/ |
| 11 prev-title: "Connect Dart & HTML" | 11 prev-title: "Connect Dart & HTML" |
| 12 --- | 12 --- |
| 13 | 13 |
| 14 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
| 15 | 15 |
| 16 * In Dart, page elements are of type Element. | 16 * In Dart, page elements are of type Element. |
| 17 * An Element knows its parent. | 17 * An Element knows its parent. |
| 18 * An Element keeps its children in a List\<Element>. | 18 * An Element keeps its children in a List\<Element>. |
| 19 * Change the DOM by adding or removing children of elements. | 19 * Change the DOM by adding or removing children of elements. |
| 20 * Respond to user input with an EventListener. | 20 * Respond to user input with an EventListener. |
| 21 | 21 |
| 22 {% endcapture %} | 22 {% endcapture %} |
| 23 | 23 |
| 24 {% capture sample_links %} | 24 {% capture sample_links %} |
| 25 | 25 |
| 26 <p> This tutorial features these examples:</p> |
| 27 * todo |
| 28 * anagram |
| 29 |
| 26 <p> | 30 <p> |
| 27 Get the source code for the samples featured in this tutorial:</p> | 31 Don't have the source code? |
| 28 | 32 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip"
> |
| 29 <ul> | 33 Download it. |
| 30 <li> | 34 </a> |
| 31 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/add-elements/todo" | |
| 32 target="_blank">todo</a> | |
| 33 </li> | |
| 34 <li> | |
| 35 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/add-elements/anagram" | |
| 36 target="_blank">anagram</a> | |
| 37 </li> | |
| 38 </ul> | |
| 39 | 35 |
| 40 {% endcapture %} | 36 {% endcapture %} |
| 41 | 37 |
| 42 {% capture content %} | 38 {% capture content %} |
| 43 | 39 |
| 44 <div class="tute-target-title"> | 40 <div class="tute-target-title"> |
| 45 <h1>{{page.title}}</h1> | 41 <h1>{{page.title}}</h1> |
| 46 <h3>Dynamically add items to the browser page.</h3> | 42 <h3>Dynamically add items to the browser page.</h3> |
| 47 </div> | 43 </div> |
| 48 | 44 |
| (...skipping 333 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 382 </ul> | 378 </ul> |
| 383 | 379 |
| 384 ##What next? | 380 ##What next? |
| 385 | 381 |
| 386 The next tutorial, [Remove DOM Elements](/docs/tutorials/remove-elements/), | 382 The next tutorial, [Remove DOM Elements](/docs/tutorials/remove-elements/), |
| 387 describes how to remove elements from the DOM and items off your todo list. | 383 describes how to remove elements from the DOM and items off your todo list. |
| 388 | 384 |
| 389 {% endcapture %} | 385 {% endcapture %} |
| 390 | 386 |
| 391 {% include tutorial.html %} | 387 {% include tutorial.html %} |
| OLD | NEW |