removeChild and appendChild for Span

[JehanNYNJ]

I need to clear out the HTML contents of a <span> element and then
re-add that element as a blank span.

Here is the code...

var elem = document.getElementById(spanId);

var deletedElem = elem.parentNode.removeChild(elem);
deletedElem.innerHTML = '<span id="'+spanId+'"></span>';
deletedElem.parentNode.appendChild(deletedElem);

This does not work. When I try to getElementById the second time the
function is called it does not find the span I added. Any suggestions?

Thanks in advance for any help.

[RobB]

[e-mail] wrote:

I need to clear out the HTML contents of a <span> element and then
re-add that element as a blank span.

Here is the code...

var elem = document.getElementById(spanId);

var deletedElem = elem.parentNode.removeChild(elem);
deletedElem.innerHTML = '<span id="'+spanId+'"></span>';
deletedElem.parentNode.appendChild(deletedElem);

This does not work. When I try to getElementById the second time the
function is called it does not find the span I added. Any suggestions?
Thanks in advance for any help.

You're removing the child span:

var deletedElem = elem.parentNode.removeChild(elem);

....effectively 'detatching' it from the document; then...

deletedElem.parentNode.appendChild(...

....referencing its parent node for appending. No parent node to
reference.

If you just want to clear out the element's descendents, try -

var elem;
if (elem = document.getElementById(spanId))
{
while (elem.hasChildNodes())
elem.removeChild(elem.lastChild);
}

Should clean it up nicely.