點擊更改錨點文本但不是跨度

我試圖在單擊某個元素時更改錨點的文本（<a href=>）。點擊更改錨點文本但不是跨度

HTML結構是：

<h1> 
    <a href=""> 
     change this text 
     <span class="breadcrumb">Do not change this text</span> 
    </a> 
</h1>

的Jquery：

var clickedtext = 'Different Text for A href'; 
$('h1 a').not('span.breadcrumb').text(clickedtext);

但由於某些原因，它<a href>下刪除一切，並把該文本。

任何幫助，高度讚賞。

來源

2017-05-02 Prithviraj Mitra

如果您使用的節點，可以將文本直接分配。

$("a").click(function (e) { 
 
    e.preventDefault(); 
 
    $(this).contents().get(0).nodeValue = "new a href text" 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1><a href="">change this text<span class="breadcrumb">Do not change this text</span></a> </h1>

來源

2017-05-02 14:21:12 Neil

這是一個新的東西給我。讓我嘗試。 –

輝煌。非常感謝。學到了一件新事物。 –

完成。再次感謝。 –

您可以複製的元素，後來追加它

var bread = $('h1 a').find('.breadcrumb').clone(); 
$('h1 a').text("cour text").append(bread);

來源

2017-05-02 14:19:34 Mazz

可以保存span元素中的變量，然後更改的a文字和追加span回來。

var clickedtext = 'Different Text for A href. '; 
 
var a = $("h1 a"), span = a.find('span') 
 

 
a.click(function() { 
 
    a.text(clickedtext).append(span) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1><a href="#">change this text. <span class="breadcrumb">Do not change this text</span></a> </h1>

來源

2017-05-02 14:22:14

這是如何做到這一點：

var clickedtext = 'Different Text for A href'; 
 
document.getElementById("toChange").innerText = clickedtext;

<h1> 
 
    <a href=""> 
 
    <span id="toChange">change this text</span> 
 
    <span class="breadcrumb">Do not change this text</span> 
 
    </a> 
 
</h1>

來源

2017-05-02 14:42:07

回答

相關問題