如何在元素中添加标记？

我正在使用我无法控制的一组模板的网站上工作。我无法进入并编辑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

如何在元素中添加标记？

回答

相关问题