如何替换HTML标签？

Question

请检查我的代码：

<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>

我当前的电话号码是30当我单击电话号码60它应该是-

<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>

我确定我以错误的方式编写了我的JavaScript代码。

请解决我上面的代码。

Answer 1

您可以确定替换标签。 但是您不必这样做。 仅使用CSS方法就很简单，也不太麻烦。 使用CSS时，你有一流的active ，你有大量的灵活性样式任何你想要的当前选择的项目。

 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

使用jQuery这样的事情会容易得多 ，如果您可以使用它，我绝对会建议您使用。

据我所知，您的代码仅更改为<span> ，而不会将已经更改的<span's>更改回<a> 。 我以为那就是你想要的？ 该脚本的代码段（在jQuery中）如下所示：

$("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

尝试这个：

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

Answer 4

以下是我的方法，请尝试一下

 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>