removechild gives NS_ERROR_INVALID_POINTER error

I am using this Javascript command to replace an empty div with the value of another div on the page. So I have this in my html:

<a href = "... some links that call the javascript ...">text link</a>
<div id="highlight">
</div>

<div id="1">
...some text
</div>

<div id="2">
... some text
</div>

The script is

settext(newdiv) {
  // set top of page highlight to appropriate text
  var desc = document.getElementById('highlight');
  if (desc.hasChildNodes()) desc.removeChild(desc.lastChild);
  document.getElementById('highlight').appendChild(
    document.getElementById(newdiv));
  }

The script works correctly the first time I replace the "highlight" div with another div 1,2,3 etc). So when I click on the appropriate hyperlinked text, the blank div (id="highlight") is filled with the contents of the associated div below (e.g. div id="1").

Then when I click a new link, the contents of div id="highlight" disappears and is replaced with the new div text. But the 2nd time I click on a div that has been removed before the "hightlight" div is blank. It only gets replaced if I use a previously unclicked div.

When I look in the Firefox Web console to see Javascript errors it says:

"Component returned failure code: 0X80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.removeChild]"

It seems like it is going out of bounds for some reason. How can I fix this?

Instead of modifying the DOM at the node level I'd recommend using the "innerHTML" to move the div contents around.