Question

I have this code

<p class='par'>some text goes here <a class='link' href='#somelink'>Link</a> Text continues here</p>

And I want to change the text within the p and the a tags but retaining the position of the a tag where it is right now.

var cache = $('.par').children();
$('.par').children().remove();
$('.par').text('new text');
$('.par').append(cache);
$('.link').text('new link text');

But this of course is appending the a tag to the end of the string. Any suggestions?

Answer 1

您可以使用 nodeType执行此类操作。然后，您可以使用textContent属性更改值。

对于文本节点，nodeType属性将返回3.

//set new value
elements = $('.par').contents().filter(function() {
  return this.nodeType == 3;
});
elements[0].textContent = 'New text ';
elements[1].textContent = 'New text 1 ';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p class='par'>some text goes here <a class='link' href='#somelink'>Link</a> Text continues here</p>

Answer 2

您也可以这样做

＆＃13;

$('p').contents().map(function() {
  if (this.nodeType == 3) this.textContent = 'New Text';
  if (this.nodeType == 1 && this.nodeName == 'A') this.textContent = 'New Link Text';
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='par'>some text goes here <a class='link' href='#somelink'>Link</a> Text continues here</p>

＆＃13;

Answer 3

您可以尝试以下脚本：

＆＃13;

$(document).ready(function () {
        var hrefTag = $('a').attr('href');
        var ClassTag = $('a').attr('class');
        $('p').html('<a class="' + ClassTag + '" href="' + hrefTag + '">Link</a>');
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='par'>some text goes here <a class='link' href='#somelink'>Link</a> Text continues here</p>

＆＃13;

希望它对你有所帮助。

Answer 4

这是你想要的吗？

var p =document.getElementsByTagName('p')[0]
var a =p.getElementsByTagName('a')[0];
p.innerHTML='';
p.appendChild(a);

Answer 5

希望此代码段有用

var cache = $('.par a'); //  will select a inside .par
var _lastText = " this is last part"; 
$('.par').empty(); // Will empty p tag
$('.par').text('new text ');
$('.par').append(cache);
$('.link').text('new link text'); 
$('.par').append(_lastText)

Working JSFIddle

Answer 6

您可以拆分<a>代码并更改“p”内和“a”外的文字位置

$(".par").html($(".par").html().replace($(".par").html().split('<a')[0], 'new first part text'));
$(".par").html($(".par").html().replace($(".par").html().split('/a>')[( $(".par").html().split('/a>').length - 1)], 'new continue text'));

更改<p>中的内容文字，但保留<a> tag in same position of content

6 个答案: