使用JQuery在現有文本周圍插入錨標記

Question

我的頁面上有一些HTML，內容如下：

<h3 class="ms-standardheader"><a name="SPBookmark_History"></a>History</h3>

我在准備創建動態超鏈接的頁面READY中運行一些javascript，並希望將其插入，以便在頁面呈現最終結果時是：

    <h3 class="ms-standardheader"><a name="SPBookmark_History"></a><a href="https://thissite.com/newurl" target="_blank"> History</a></h3>

H3的類名稱存在於多個頁面元素上。 定位標記的名稱SPBookmark_History是唯一的。

如何使用JQuery或純JavaScript完成此操作？

謝謝

Answer 1

只需遵循以下代碼：

$(document).ready(function(){
  var link = $('a[name=SPBookmark_History]');
  link.attr('href','https://thissite.com/newurl');
  link.attr('target','_blank');
});

JSFIDDLE樣本

Answer 2

您可以使用：

• Attribute Equals Selector [name =” value”] ：為了選擇元素，因為SPBookmark_History是唯一的
• .closest（選擇器） ：獲取父h3元素。
• .contents（） ：獲取匹配的元素集中每個元素的子元素，包括文本和注釋節點。
• filter-function ：為了僅獲取鏈接后的文本
• .wrap（） ：將HTML結構包裝在匹配元素集中的每個元素周圍。

編碼：

 $('a[name="SPBookmark_History"]').closest('h3.ms-standardheader') .contents(). filter(function (idx, ele) { return ele.nodeType == Node.TEXT_NODE }) .wrap($('<a/>', {href: "https://thissite.com/newurl", target: "_blank"})); console.log('Result is: ' + document.getElementsByClassName('ms-standardheader')[0].outerHTML); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 class="ms-standardheader"><a name="SPBookmark_History"></a>History</h3>