Как добавить разметку внутри элемента?

Я работаю над сайтом, который использует набор шаблонов, над которыми я не контролирую. Я не могу войти и редактировать 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?

EDIT:

К сожалению, я должен был быть более ясным, это обернуто в 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

Это реальный код? Нет классов или идентификаторов? Если это так, будет сложно использовать jQuery только на этом, так как вы не сможете выбрать именно этот тег. –

Если вы не хотите применять это ко всем привязным тегам или всем тегам изображений и т. Д. –

Получить содержимое, фильтровать, чтобы быть непустые текстовые узлы, и обертывают с элементом, таким как 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

Как добавить разметку внутри элемента?

ответ

Смежные вопросы