如何替换HTML标签？

Question

Please check my code:

<div id="seconds">
  <a onclick="ChangeRefreshSeconds(15,this);" href="javascript:;">15</a>
  <b><span style="background-color:yellow;">30</span></b>
  <a onclick="ChangeRefreshSeconds(60,this);" href="javascript:;">60</a>
  <a onclick="ChangeRefreshSeconds(120,this);" href="javascript:;">120</a>
</div>

My current number is 30 When i click on the number 60 it should be-

<div id="seconds">
  <a onclick="ChangeRefreshSeconds(15,this);" href="javascript:;">15</a>
  <a onclick="ChangeRefreshSeconds(30,this);" href="javascript:;">30</a>
  <b><span style="background-color:yellow;">60</span></b>
  <a onclick="ChangeRefreshSeconds(120,this);" href="javascript:;">120</a>
</div>

Javascript:

<script>
function ChangeRefreshSeconds(s,t){
    //t.innerHTML='<span style="background-color:yellow;">'+s+'</span>';
    var textnode=document.createTextNode('<span style="background-color:yellow;">'+s+'</span>');
    t.replaceChild(textnode,t);
}
</script>

I am sure that i have written my JavaScript code in the wrong way.

Please solve my above code.

Answer 1

You can replace tags for sure. But you don't have to do that. It's much simple and less obtrusive to go with just CSS approach. With CSS when you have class active you have great deal of flexibility to style currently selected item whatever you want.

 function ChangeRefreshSeconds(seconds, obj) { // do nothing if it's already active if (obj.className === 'active') return; var a = document.getElementById('seconds').children; for (var i = 0; i < a.length; i++) { a[i].className = ''; } obj.className = 'active'; // do something else alert('Current seconds: ' + seconds); } 

 #seconds .active, #seconds .active:active { background: yellow; cursor: default; color: #333; font-weight: bold; } 

 <div id="seconds"> <a onclick="ChangeRefreshSeconds(15, this);" href="javascript:;">15</a> <a onclick="ChangeRefreshSeconds(30, this);" href="javascript:;" class="active">30</a> <a onclick="ChangeRefreshSeconds(60, this);" href="javascript:;">60</a> <a onclick="ChangeRefreshSeconds(120, this);" href="javascript:;">120</a> </div> 

Answer 2

Something like this would be a lot easier with jQuery , if you have the possibility to use it, i would definitely advise you to.

As far as i can see your code only changes to <span> and doesn't change the already changed <span's> back to <a> . I assumed that's what you wanted? The piece of code for this script (in jQuery) would look something like:

$("div#seconds a").click(function(){
    var originalValue = $(this).html();
    var spanValue = $("b span", $(this).parent()).html();

    $("b", $(this).parent()).replaceWith('<a href="javascript:;">'+spanValue+'</a>');
    $(this).replaceWith('<b><span style="background-color:yellow;">'+originalValue+'</span></b>');
});

Answer 3

try this:

<script>
    function ChangeRefreshSeconds(s,t){
        var textnode=document.createTextNode('<span style="backgroundcolor:yellow;">'+s+'</span>');
        t.parentNode.replaceChild(textnode,t);
     }
 </script>

Answer 4

Following is my approach, try out this

 function ChangeRefreshSeconds(event){ event = event || window.event; var seconds = document.getElementById('seconds'); var anchors = seconds.getElementsByTagName('a'); var i; for (i = 0; i < anchors.length; i++) { anchors[i].className = ''; } event.target.className = 'active'; } 

 .active { background-color:yellow; } 

 <div id="seconds"> <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">15</a> <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">30</a> <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">60</a> <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">120</a> </div>