edit pass on T3,4,5, updated images

src/site/docs/tutorials/add-elements/index.markdown

 ---
 layout: default
 title: "Add Elements to the DOM"
 description: "You have an Element object, now what?"
 has-permalinks: true
 tutorial:
   id: add-elements
 next: remove-elements/
 next-title: "Remove DOM Elements"
 prev: connect-dart-html/
 prev-title: "Connect Dart & HTML"
 ---
 
 {% capture whats_the_point %}
 
 * In Dart, page elements are of type Element.
 * An Element knows its parent.
 * An Element keeps its children in a List\<Element>.
 * Change the DOM by adding or removing children of elements.
 * Respond to user input with an EventListener.
 
 {% endcapture %}
 
 {% capture sample_links %}
 
 <p>
-Get the source code for the samples featured in this target:</p>
+Get the source code for the samples featured in this tutorial:</p>
 
 <ul>
   <li>
-    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target03/todo"
+    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/add-elements/todo"
        target="_blank">todo</a>
   </li>
   <li>
-    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target03/anagram"
+    <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/add-elements/anagram"
        target="_blank">anagram</a>
   </li>
 </ul>
 
 {% endcapture %}
 
 {% capture content %}
 
 <div class="tute-target-title">
 <h1>{{page.title}}</h1>
 <h3>Dynamically add items to the browser page.</h3>
 </div>
 
-As you learned in the previous target,
+As you learned in the previous tutorial,
 the DOM represents the structure
 of a web page document using a simple tree structure.
 Each node in the tree represents an item on the page.
 Each node in the tree keeps track of both
 its parent and its children.
 In Dart, the
 <a href="https://api.dartlang.org/dart_html/Node.html" target="_blank">Node</a>
 class contains the methods and properties
 that implement a node's tree functionality.
 
 HTML page elements are one kind of node that can be in the DOM tree.
 They have a rectangular area on the page and can receive events.
 Examples of elements include
 heading elements, paragraph elements, table elements,
 button elements, and so on.
 
 In Dart,
 elements are implemented by the
 <a href="https://api.dartlang.org/dart_html/Element.html" target="_blank">Element</a>
 class, which is a subclass of Node.
 Because the nodes you care about most are usually elements,
-this target focuses on Element,
+this tutorial focuses on Element,
 rather than on Node.
 
 * [Copy and run the todo app](#copy-app)
 * [About parent and child Elements in Dart](#tree-structure)
 * [Setting up the page in HTML](#html-code)
 * [Getting an element from the DOM](#dart-code)
 * [Registering an event handler](#event-handler)
 * [About EventListener functions](#about-event-listeners)
 * [Adding an element to the DOM tree](#add-elem)
 * [Styling the page elements](#about-css)
 * [Moving elements within the DOM tree](#moving-elements)
 * [Other resources](#other-resources)
+* [What next?](#what-next)
 
 ##Copy and run the todo app {#copy-app}
 
-In this target, you will be working with a sample web app
+In this tutorial, you will be working with a sample web app
 that is a partial implementation of a todo list.
 This program dynamically changes the DOM,
 and therefore the web page,
 by adding elements to the DOM tree.
 
 **Try it!** Type in the text field and press return.
 The app adds an item to the list.
 Enter a few items into the input field:
 
 <iframe class="running-app-frame"
         style="height:250px;width:300px;"
-        src="http://dart-lang.github.io/dart-tutorials-samples/web/target03/todo/web/todo.html">
+        src="examples/todo/todo.html">
 </iframe>
 
-You can find the complete source code for this sample on github at
-<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target03/todo"
-target="_blank">todo</a>.
-
 This is the beginning of an app to manage a list of things to do.
 Right now, this app is for procrastinators only
 because the program can only add items to your to do list
 but not remove them.
 
 ##About parent and child Elements in Dart {#tree-structure}
 
 The Node class in Dart implements the basic treeing behavior
 for nodes in the Dart DOM.
 The Element class is a subclass of Node that implements
 the behavior specific to page element nodes.
 For example,
 an element knows the width and height of
 its enclosing rectangle on the page
 and it can receive events.
 
 You can manipulate the DOM tree by adding and deleting nodes.
 However, many Dart apps are concerned only with page elements.
 So for convenience and code simplicity,
 the Element class implements API
 for interacting with
 a subset of the DOM that includes
 only the nodes that are Elements.
 You can work with a virtual tree of Elements
 rather than the more complex tree of Nodes.
-This target shows you how to manipulate the
+This tutorial shows you how to manipulate the
 DOM through the Element class.
 
 An Element has a parent Element
 and maintains references to its child Elements in a list.
 
 ![An element with multiple child elements and a parent element](images/relationships.png)
 
 An Element has at most one parent Element.
 An Element's parent is final and cannot be changed.
 So you cannot move an Element by changing its parent.
 Get an Element's parent with the getter `parent`.
 For example, if you have an Element with the name `anElement`
 you would refer to its parent element with `anElement.parent`.
 
 ![Dart code reference to anElement's parent](images/parent-reference.png)
 
 An Element maintains references to its child elements in a list.
-List is a class in the dart:core library
+<a href="https://api.dartlang.org/dart_core/List.html" target="_blank">List</a>
+is a class in the dart:core library
 that implements an indexable collection with a length.
 A list can be of fixed size or extendable.
 
 List is an example of a _generic_ (or _parameterized_) type&mdash;a type
 that can declare formal type parameters.
 This means that a list can be declared
 to contain only objects of a particular type.
 For example:
 
 | List declaration | List description|
@@ skipping 131 matching lines @@
 
 The addToDoItem() function ignores the Event object passed to it.
 
 ##Adding an element to the DOM tree {#add-elem}
 
 The change event handler has the following code:
 
 ![The addToDoItem() function explained](images/add-element-code.png)
 
 The final line of code is where the DOM gets changed.
-The add() method is defined in the List class in the dart:core library.
 
 An Element keeps references to all of its children in a list called `children`.
 By adding and removing elements to and from this list,
-your code changes the DOM.
+the code changes the DOM.
 When the DOM changes, the browser re-renders the browser page.
 The effect, in our todo app, is that a new bullet item appears 
 in the to do list.
 
 ##Styling the page elements {#about-css}
 
 Let's take a look at the CSS file for this app.
 
 ![The effect of CSS styles](images/css-code.png)
 
@@ skipping 12 matching lines @@
 element with the ID to-do-list, thus styling
 each item in the to do list.
 
 ##Moving elements within the DOM tree {#moving-elements}
 
 Here's an example that shows how to move an element within the DOM.
 **Try it!** Form a word by clicking the letter tiles.
 
 <iframe class="running-app-frame"
         style="height:400px;width:400px;"
-        src="http://dart-lang.github.io/dart-tutorials-samples/web/target03/anagram/web/anagram.html">
+        src="examples/anagram/anagram.html">
 </iframe>
 
-You can find the complete source code for this sample on github at
-<a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/target03/anagram"
-target="_blank">anagram</a>.
-
 When the program starts,
 it creates one button element for each of seven
 randomly selected letters.
 The program adds each button to a DOM element&mdash;a simple
 &lt;div&gt; element identified by the CSS selector `letterpile`&mdash;with
 a call to letterpile.children.add().
 
 ![Dart code populates the letter pile with buttons](images/anagram-newletters.png)
 
 Each button element in the letter pile
@@ skipping 20 matching lines @@
     <a href="/docs/cookbook/">
     <i class="icon-food"> </i> Dart Cookbook</a>,
     where you'll find many recipes about manipulating the DOM
     and using CSS.
     The cookbook also has recipes about basic Dart data types,
     such strings, lists, maps, and numbers.
   </li>
 
   <li>
     You can find more information about the DOM and CSS in
-    <a href="/docs/dart-up-and-running/">Dart Up and Running</a>,
+    <a href="/docs/dart-up-and-running/">Dart: Up and Running</a>,
     which also provides thorough coverage of the Dart language, 
     libraries, and tools.
   </li>
 </ul>
 
+##What next?
+
+The next tutorial, [Remove DOM Elements](/docs/tutorials/remove-elements/),
+describes how to remove elements from the DOM and items off your todo list.
+
 {% endcapture %}
 
 {% include tutorial.html %}