如何使用jquery在我的文本中添加符号后的跨度

Question

我有元素

<h1>some text - subtitle starts here</h1>

我想在 -

之后添加一个范围

<h1>Some text - <span>subtitle starts here</span></h1>

Answer 1

$('h1').append('<span>subtitle part</span>');

或者如果你有副标题部分，只想用<span>包裹：

var text = $('h1').text();
text = text.split(' - ');
$('h1').html(text[0] + ' - <span>' + text[1] + '</span>');

Answer 2

您可以使用连字符执行split并更改拆分数组的第二部分。然后，join使用连字符。将此新结果作为HTML分配给<h1>代码：

var nHTML = $('h1').html();
nHTML = nHTML.split('-');
nHTML[1] = '<span>' + nHTML[1] + '</span>';
$('h1').html(nHTML.join('-'));

h1 span{
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>some text - subtitle starts here</h1>

Answer 3

如果您在网站上只有一个h1代码，则可以使用replaceWith功能

$("h1").replaceWith("<h1>Some text - <span>subtitle starts here</span></h1>");

文档：http://api.jquery.com/replacewith/

Answer 4

您需要append()功能。 （参见文献here）

HTML：     <h1 id="foo">Loremipsum</h1>

jQuery的：

$('#foo').append('<span>subtitle starts here</span>');