title: Javascript nodes and functions use
body: <p>I have a table with four rows, each one with an "id", and inside each one link with a text.</p>
  
  <p>I want to change the innerHTML of the clicked link with the next one link innerHTML.</p>
  
  <p>So if I have this:       </p>
  
  <pre><code>ONE
  TWO
  THREE
  FOUR
  </code></pre>
  
  <p>and I click on TWO for example, the result must be:</p>
  
  <pre><code>ONE
  THREE 
  TWO
  FOUR
  </code></pre>
  
  <p>As follows my code, which already change the order of the two first links, but it does the same if I click another link.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function change()
  {
  var link = document.getElementsByTagName("a");
  var i = 0;
  var aux = link[i].innerHTML;
  link[i].innerHTML = link[i+1].innerHTML;
  link[i+1].innerHTML = aux;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table border="1"&gt;
  &lt;tr id="1"&gt;&lt;td&gt;&lt;a href="#" onclick="change()"&gt;ONE&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id="2"&gt;&lt;td&gt;&lt;a href="#" onclick="change()"&gt;TWO&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id="3"&gt;&lt;td&gt;&lt;a href="#" onclick="change()"&gt;THREE&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id="4"&gt;&lt;td&gt;&lt;a href="#" onclick="change()"&gt;FOUR&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've been working on this all day and I can't see what else can I do. I'm starting with both Java and Javascript, so the use of arrays and the DOM and Javascript functions is new to me.</p>