获取锚内标签文本

Question

i want to get text inside anchor text and show in p tag

example :-

<p class="post">
some content
<span more-description="here is read more description">...</span>
<a class="readmore">Read More</a>
</p>

so after click on "Read More" text.

the new source code will be:-

<p class="post">
some content
<span class="full">here is read more description</spn>
<span more-description="here is read more description" style="display:none;">...</span>
<a class="readmore">Read More</a>
</p>

Answer 1

$(document).ready(function(){
 $('.readmore').click(function(){
    var span=$('<span>');
    span.addClass('full').text($('[more-description]').attr('more-description'));
    $('p').prepend(span);
    $('[more-description]').hide()
  })
})

Answer 2

In plain Javascript:

document.querySelector(".readmore").onclick = function () {
 var span = document.createElement('span');
 span.className = 'full';
 span.innerHTML = 'here is read more description';
 var post = document.querySelector('post');
 post.insertBefore(span, post.childNodes[0]);
 post.childNodes[1].style.display = 'none';
}

Answer 3

simple way to do it without other frameworks:

<p class="post">
  some content
<span class="full" style="display:none">here is read more description</span>

<span more-description="here is read more description" style="display:none;">... </span>
<a class="readmore" onclick="document.getElementsByClassName('full')[0].style.display='block';" >Read More</a>
</p>

or display='inline-block'