Как получить атрибут title и добавить в другое место

Question

Как получить атрибут title и добавить в другое место?

У меня есть этот код ниже:

<div class="span"> 
<a title="SHARON MORGAN" href="/members/SHARONMORGAN"> 
    <span class="avatar avatar-96 avatar-default"></span> 
</a> 
</div> 

То, что я хочу изменить так:

<div class="span"> 
<a title="SHARON MORGAN" href="/members/SHARONMORGAN"> 
    <span class="avatar avatar-96 avatar-default"></span> 
</a> 
<a href="/members/SHARONMORGAN">SHARON MORGAN</a> 
</div> 

Обратите внимание на имя ШАРОН MORGAN вставляется рядом с тега привязки и обертывание с той же ссылке над ним. Любая помощь приветствуется.

Answer 1

Используя jQuery, вам нужно как-то захватить элемент и прочитать атрибут title. Тогда вы можете делать то, что хотите.

<a title="SHARON MORGAN" id="sharon-morgan" href="..."><span>...</span></a> 
<script type="text/JavaScript"> 
var title = $('a#sharon-morgan').attr('title'); 
var href = $('a#sharon-morgan').attr('href'); 
var a = $('<a href="' + href + '">' + title + '</a>').appendTo('body'); 
</script> 

Конечно, это просто пример, потому что вы не указали слишком много деталей. Посмотрите на jQuery, это делается именно для таких вещей.

Answer 2

Вы можете использовать метод after для генерации нового элемента. this в обратном вызове функции ссылается на выбранный элемент (ы), так что вы можете использовать this.title, this.getAttribute('title') или $(this).attr('title') для получения значения заголовка:

$('div.span a').after(function() { 
    return $('<a/>', { 
     href: this.href, 
     text: this.title 
    }); 
}); 

Или используя ваниль JS:

[].slice.call(document.querySelectorAll('div.span a')).forEach(function(el) { 
    var a = document.createElement('a'); 
    a.href = el.href; 
    a.textContent = el.title; 
    el.parentNode.insertBefore(a, el.nextSibling); 
}); 

http://jsfiddle.net/y2goyvvm/

Answer 3

С основным заявлением на jquery:

$(function() { 
    $('[title="SHARON MORGAN"]').each(function() { 
     $(this.parentNode).append('<a href=\"' + this.href + '\">' + this.title + '</a>'); 
    }); 
});