获取文本内锚标记

Get Text Inside Anchor tag

本文关键字：取文本 获取      更新时间：2023-09-26

我想在锚文本中获取文本并在p标签中显示

示例:- 

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

所以之后点击"阅读更多"文本。

新的源代码将是:-

<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>

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

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

无需其他框架的简单方法:

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

相关文章：