CODEWITHSUNDEEP
javascriptjquery
Corlax
Corlax

Reputation: 764

Get Text Inside Anchor tag

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>

Upvotes: 0

Views: 536

Answers (3)

Arthur Tsidkilov
Arthur Tsidkilov

Reputation: 5411

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'

Upvotes: 1

Mustaghees
Mustaghees

Reputation: 526

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';
}

Upvotes: 1

user3227295
user3227295

Reputation: 2156

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

Upvotes: 3

Related Questions