In the following example, you use the prependChild() and the appendChild() methods to add a property to the beginning or end of an XML object's list of properties. Similarly, you use the insertChildBefore() method and the insertChildAfter() method to add a property before or after a specified property. To delete an item, use the delete() method to remove a node from the XML.

Example

 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="500" height="600"
    creationComplete="myDataGrid.selectedIndex=0; validateForm();"

>

    
        [CDATA[        
            
            import mx.controls.Alert;
        
            // Constants
            private const SELECTED_ITEM:uint = 0;
            private const THE_LIST:uint = 1;
            private const BEFORE:uint = 0;
            private const AFTER:uint = 1;
                
            // Flag: is the form valid?
            [Bindable]
            private var formIsValid:Boolean;
            
            // Flag: does a selection exist in the data grid?
            [Bindable]

            private var selectionExists:Boolean;
            
            // Holds the index of the next item in the 
            // data grid following the deletion of a book item.
            private var newSelectedIndex:int;
        
            // Model: XML structure describing 
            // some of the books in my collection.    
            [Bindable]
            private var myBooks:XML = 
                <books>

                    <book ISBN="1590595181">
                        <title>Foundation ActionScript Animation: Making Things Movetitle>
                        <author>Keith Petersauthor>

                        <amazonUrl>http://tinyurl.com/npuxt
                    book>
                    <book ISBN="1582346194">
                        <title>Send in the Idiots: Stories from the Other Side of Autismtitle>

                        <author>Kamran Nazeerauthor>
                        <amazonUrl>http://tinyurl.com/lo5ts
                    book>

                books>
            
            // Add a new book. 
            private function addBookHandler():void
            {

                // Create a new XML Object from the form information
                var newBook:XML = 
                    <book ISBN={isbnInput.text}>
                        <title>{titleInput.text}title>

                        <author>{authorInput.text}author>
                        <amazonUrl>{amazonUrlInput.text}amazonUrl>
                    book>;
                    
                // Save the selected book's index so it can be reselected

                // in the grid once the new book is added.
                var selectedBookIndex:uint = myDataGrid.selectedIndex;
                                                    
                // Does the user want to add the new
                // book relative to the selected book in the
                // data grid or relative to the list itself?
                if (addRelativeTo.selectedIndex == SELECTED_ITEM)

                {
                    // Add the new item relative to the selected item.

                    var selectedBook:XML = myBooks.book[selectedBookIndex];
                                        
                    // Does the user want to add it before or after

                    // the selected item?
                    if (addPosition.selectedIndex == BEFORE)
                    {    
                        // Add new item before selected item 
                        myBooks = myBooks.insertChildBefore(selectedBook, newBook);
                    }

                    else
                    {
                        // Add new item after selected item
                        myBooks = myBooks.insertChildAfter(selectedBook, newBook);
                    }

                }
                else
                {
                    // Add the new item relative to the whole list of books.
                    if (addPosition.selectedIndex == BEFORE)

                    {
                        // Add new item at the start of the list. 
                        myBooks = myBooks.prependChild(newBook);
                    }
                    else

                    {
                        // Add new item at the end of the list.
                        myBooks = myBooks.appendChild(newBook);
                    }                    
                }

                // Select the previously selected item in the grid
                // so the user doesn't lose their position. (If a new book was
                // added before the currently selected item, that item's
                // new index will be one greater, so select that.)
                var newSelectedIndex:uint = (addPosition.selectedIndex == BEFORE) ? selectedBookIndex + 1: selectedBookIndex;
                myDataGrid.selectedIndex = newSelectedIndex;
                
            }    
            
            // Delete selected book

            private function deleteBookHandler():void
            {
                // Save the currently selected index.
                var selectedBookIndex:int = myDataGrid.selectedIndex;
                                                
                // Delete the currently selected book.

                delete (myBooks.book[selectedBookIndex]);
                
                // Reselect the next logical item in the data grid.
                newSelectedIndex = (selectedBookIndex==0) ? 0 : selectedBookIndex - 1;

                // Change the selected index of the data grid

                // at a later frame. See note on changeDataGridIndex()
                // method for more details on this workaround. 
                callLater ( changeDataGridIndex );            
            }    

            // This is a workaround for a known issue with
            // List-based components where deleting an item 
            // from the control's dataProvider leaves the 

            // selectedIndex at an incorrect value. The workaround
            // is to reassign the data provider at least a 
            // frame later and to change the index there. 
            private function changeDataGridIndex ():void
            {

                // Reassign the data grid's data provider.
                myDataGrid.dataProvider = myBooks.book;

                // Set the selected index.
                myDataGrid.selectedIndex = newSelectedIndex;

                // Validate the form to make sure that there
                // is actually a selection (that the grid is 
                // not empty).

                validateForm();
            }
            
            // Perform simple form validation.
            private function validateForm():void

            {
                // Is the form valid?
                formIsValid = 
                    isbnInput.text != "" 
                    && titleInput.text != ""

                    && authorInput.text != ""
                    && amazonUrlInput.text != "";
                
                // Does a selection exist in the data grid?    
                selectionExists = myDataGrid.selectedIndex != -1;
            }                

        ]]>

    
        
    
     
        title="Assigning XML data"
        paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"
    >

        
         
            id="myDataGrid" 
            dataProvider="{myBooks.book}"
            change="validateForm();"
        >

            
                 dataField="@ISBN" headerText="ISBN" width="85"/>
                 dataField="title" headerText="Title"/>

                 dataField="author" headerText="Author"/>
                 dataField="amazonUrl" headerText="Web site">

                    
                        
                            
                                label="Visit"
                                click="navigateToURL(new URLRequest(data.amazonUrl), 'blank');"
                            />                                    
                        

                                            
                
            
        
        
        

         width="100%" autoLayout="false">
             label="New book details"/>

             label="ISBN:" width="
			100%">
                 
                    id="isbnInput" 
                    width="100%"
                    text="1590596196"
                    change="validateForm();"
                />

            
             label="Title:" width="100%">
                 
                    id="titleInput" 
                    width="100%"
                    text="Object Oriented Actionscript for Flash 8"
                    change="validateForm();"
                />

            
             label="Author:" width="100%">
                 
                    id="authorInput"
                    width="100%"
                    text="Peter Elst"
                    change="validateForm();"
                />

            
             label="Amazon Url" width="100%">
                 
                    id="amazonUrlInput"
                    width="100%"
                    text="http://tinyurl.com/qxon2"
                    change="validateForm();"
                />

                    
        
                
         id="deb" width="100%"/>        
        
        

             
                label="Add book"
                click="addBookHandler();"
                enabled="{formIsValid}"
            />
             id="addPosition" enabled="{formIsValid}">

                before
                after
            
             
                id="addRelativeTo" 
                enabled="{formIsValid}"
            >

                selected item.
                the list.
            
             height="15"/>

             
                label="Delete book"
                click="deleteBookHandler();"
                enabled="{selectionExists}"
            />