How to replace <a> with <span> via DOM

[depi]

Hi guys.

By yesterday I'm struggling with the DOM. I would like to create an AJAX based poll where when a user votes it changes the link to a normal text. Everything is working except this change after voting. I don't know how to change <a> to a <span>.

Here is my HTML code:

<div class="poll">
<h3>Question?</h3>
<a href="javascript://" onclick="xajax_hlasuj('1', '0');" id="hlasuj1-0">Answer 1</a>
<span class="pollbar-full"><span class="pollbar-percent" id="pollbar1-0" style="width: 50%;">50%</span></span>

<a href="javascript://" onclick="xajax_hlasuj('1', '0');" id="hlasuj1-1">Answer 2</a>
<span class="pollbar-full"><span class="pollbar-percent" id="pollbar1-1" style="width: 50%;">50%</span></span>

<strong>Votes all:</strong> <span id="votesall1">60</span>
</div>


And here is what I would like to get:

<div class="poll">
<h3>Question?</h3>
<span>Answer 1</span>
<span class="pollbar-full"><span class="pollbar-percent" id="pollbar1-0" style="width: 50%;">50%</span></span>

<span>Answer 2</span>
<span class="pollbar-full"><span class="pollbar-percent" id="pollbar1-1" style="width: 50%;">50%</span></span>

<strong>Votes all:</strong> <span id="votesall1">60</span>
</div>


I had a working version, but it not worked well in IE, so now I have nothing. Could anyone of you please give me an theoretically advice or some of JS code?

Thanks very much.

[bibel]

Just put the <a> tag inside another element, and update the content of that element

<div id="blabla">
<a href="javascript://" onclick="xajax_hlasuj('1', '0');" id="hlasuj1-0">Answer 1</a>
</div>

and then just update the innerHTML for blabla.
Why does everyone want to make simple things complicated ?

[depi]

Why does everyone want to make simple things complicated ?

To be truly I know this solution, but then I have there some CSS bug issue in IE so this is why I do things so complicated :)

[briansol]

not to mention, its a horrible way to do it and innerHTML is not a web standard... lol
also, <a href="javascript://" is a big no no as well. you should have a non-js version avaialble and return the onclick event false.


what you want to do is to use the create element syntax.

these should help:
http://domscripting.com/blog/display/99
http://icant.co.uk/articles/from-dhtml-to-dom/from-dhtml-to-dom-scripting.html

[ajsa52]

Just put the <a> tag inside another element, and update the content of that element

<div id="blabla">
<a href="javascript://" onclick="xajax_hlasuj('1', '0');" id="hlasuj1-0">Answer 1</a>
</div>

and then just update the innerHTML for blabla.
Why does everyone want to make simple things complicated ?

Another option could be: displaying/hiding the "blabla" DIV using display sytle: display='' and display='none'