如何在元素中添加標記？

我正在使用我無法控制的一組模板的網站上工作。我無法進入並編輯HTML，但我可以添加CSS。我試圖通過在一些文本中包圍一個範圍來更好地控制配置文件列表的外觀。我已經看過使用jQuery完成類似的事情，但在這種情況下我還沒有能夠得到任何東西。如何在元素中添加標記？

這是當前的標記：

<h4> 
    <a href="..."> 
    Person's Name 
    <img width="120" height="122" alt="" src="..."> 
    </a> 
</h4>

我的問題是，有沒有辦法控制周圍Person's Name文本邊距這裏面用css也沒有應用到圖像的標籤。

我想要做的就是添加一個<span>的標籤的第一部分後，然後關閉與</span>的img標籤之前的跨度，我可以用CSS定位到包裝的名稱。我猜添加</span>不會太難使用.before，但加入開頭<span>讓我難住。

如果我使用jQuery，最好的方法是什麼？

編輯：

對不起，我應該更清楚，這是包裹在一個班級一個div所以目前看起來是這樣的：

<div class="profile"> 
    <h4> 
    <a href="..."> 
     Person's Name 
     <img width="120" height="122" alt="" src="..."> 
    </a> 
    </h4> 
</div>

目標將是這樣的：

<div class="profile"> 
    <h4> 
    <a href="..."> 
     <span>Person's Name</span> 
     <img width="120" height="122" alt="" src="..."> 
    </a> 
    </h4> 
</div>

來源

2014-10-27 kevngibsn

只需添加一個左邊距到'img'標籤？ – mattytommo 2014-10-27 15:42:22

這是實際的代碼嗎？沒有類或ID？如果是這樣的話，那麼使用jQuery就很困難，因爲你不能只選擇那個特定的標籤。 – 2014-10-27 15:44:54

除非你想把它應用到所有的錨標籤，或所有的圖像標籤等。 – 2014-10-27 15:45:46

獲取的內容，將其過濾是非空文本節點，並用元件包裹，如span：

$('h4 > a') 
 
    .contents() 
 
    .filter(function() { 
 
     return this.nodeType === 3 && $.trim(this.nodeValue) !== ''; 
 
    }) 
 
    .wrap('<span/>');

h4 > a > span{ 
 
    background-color:red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<h4> 
 
    <a href="..."> 
 
    Person's Name 
 
    <img width="120" height="122" alt="" src="..."> 
 
    </a> 
 
</h4>

來源

2014-10-27 15:50:02 Jamiec

如何在元素中添加標記？

回答

相關問題