<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>tech stuff &#187; dom</title>
	<atom:link href="http://codytaylor.org/tag/dom/feed" rel="self" type="application/rss+xml" />
	<link>http://codytaylor.org</link>
	<description>From Cody Taylor.</description>
	<lastBuildDate>Sun, 30 Oct 2011 04:15:41 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Javascript DOM List Swap Nodes Example</title>
		<link>http://codytaylor.org/2009/05/javascript-dom-list-swap-nodes-example.html</link>
		<comments>http://codytaylor.org/2009/05/javascript-dom-list-swap-nodes-example.html#comments</comments>
		<pubDate>Sun, 31 May 2009 18:02:29 +0000</pubDate>
		<dc:creator>Cody Taylor</dc:creator>
				<category><![CDATA[programming]]></category>
		<category><![CDATA[dom]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[nodes]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://codytaylor.org/?p=14069</guid>
		<description><![CDATA[I couldn't find an easy to follow example to do this anywhere on the web..]]></description>
			<content:encoded><![CDATA[<p>I couldn&#8217;t find an easy to follow example to do this anywhere on the web so I did my own up. Basically I wanted a list where each item has an up and a down button that will dynamically reorder the list. I tried swapping the nodes themselves but it didn&#8217;t work so it seems that I have to use the removeChild and insertBefore methods to actually see the results on the page.<br />
Here is the <a href='http://quick-content.com/dom_list.html' title='javascript dom example' alt='javascript dom example'>Javascript DOM Example</a><br />
<pre><code>
&lt;ul id=&#039;list&#039; name=&#039;list&#039;&gt;
&lt;/ul&gt;

&lt;script type=&#039;text/javascript&#039;&gt;

//swap the current li node with the one above it
function up(button_node)
{
&nbsp;&nbsp;var current_node = button_node.parentNode;
&nbsp;&nbsp;var list_children = document.getElementById(&#039;list&#039;).childNodes;
&nbsp;&nbsp;var list_node = document.getElementById(&#039;list&#039;);
&nbsp;&nbsp;
&nbsp;&nbsp;var temp_node;
&nbsp;&nbsp;var previous_node;
&nbsp;&nbsp;
&nbsp;&nbsp;for(var i=0;i&lt;list_children.length;i++)
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;if(current_node.id == list_children[i].id &amp;&amp; previous_node)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp_node = list_children[i].cloneNode(true);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list_node.removeChild(list_children[i]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list_node.insertBefore(temp_node,previous_node);
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;if(list_children[i].tagName==&#039;LI&#039;)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;previous_node=list_children[i];
&nbsp;&nbsp;}
}

//swap the chosen li node with the one below it
function down(button_node)
{
&nbsp;&nbsp;var current_node = button_node.parentNode;
&nbsp;&nbsp;var list_children = document.getElementById(&#039;list&#039;).childNodes;
&nbsp;&nbsp;var list_node = document.getElementById(&#039;list&#039;);
&nbsp;&nbsp;
&nbsp;&nbsp;var temp_node;
&nbsp;&nbsp;var previous_node = &quot;&quot;;
&nbsp;&nbsp;
&nbsp;&nbsp;for(var i=0;i&lt;list_children.length;i++)
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;if(current_node.id == list_children[i].id)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;previous_node=list_children[i];&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;else if(previous_node &amp;&amp; list_children[i].tagName==&#039;LI&#039;)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;temp_node = list_children[i].cloneNode(true);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list_node.removeChild(list_children[i]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list_node.insertBefore(temp_node,previous_node);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;previous_node = &quot;&quot;;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
}

//create the li elements
function create_list()
{
&nbsp;&nbsp;for(var i=0;i&lt;6;i++)
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;add_li(&#039;list&#039;, &quot;Item &quot;+i,&quot; Item &quot;+(i+1)+&quot; \
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&#039;button&#039; id=&#039;up_button1&#039; value=&#039;Up&#039; onclick=&#039;up(this);&#039;&gt;\
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&#039;button&#039; id=&#039;down_button1&#039; value=&#039;Down&#039; onclick=&#039;down(this);&#039;&gt;&quot;);
&nbsp;&nbsp;}&nbsp;&nbsp;
}

//add a li element
function add_li(list, id, text) {
&nbsp;&nbsp;var list = document.getElementById(list);
&nbsp;&nbsp;var li = document.createElement(&quot;li&quot;);
&nbsp;&nbsp;li.innerHTML = text;
&nbsp;&nbsp;li.id=id;
&nbsp;&nbsp;list.appendChild(li);
}

create_list();
&lt;/script&gt;
</code></pre><br />
So it is a little longer than I expected but it works and it&#8217;s pretty easy to understand. </p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodytaylor.org%2F2009%2F05%2Fjavascript-dom-list-swap-nodes-example.html&amp;linkname=Javascript%20DOM%20List%20Swap%20Nodes%20Example"><img src="http://codytaylor.org/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://codytaylor.org/2009/05/javascript-dom-list-swap-nodes-example.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

