jQuery - 在文本后添加元素答案

【问题标题】：jQuery - add element after textjQuery - 在文本后添加元素
【发布时间】：2013-12-17 09:09:49
【问题描述】：

我有一个带有一些链接的导航：

<ul class="nav">
 <li>
  <a class="active">linkname</a>
 <li>
</ul>

现在我需要在“链接名”之后直接添加额外的内容，如下所示：

<ul class="nav">
 <li>
  <a class="active">linkname<b class="caret"></b></a>
 <li>
</ul>

如何在特定文本之后直接添加元素（div、span、b）？

【问题讨论】：

标签： jquery append

【解决方案1】：

试试.append()

$('ul.nav a.active').append('<b class="caret"></b>');

fiddle Demo

【讨论】：

【解决方案2】：

$("a.active").append("<b class='caret'></b>");

【讨论】：

【解决方案3】：

$('a.active').html($('a.active').text() + '<b class="caret"></b>');

更新：

想知道这个问题是否类似于如何在文本之间插入元素

<a class="active">link<b class="caret">BOLD</b>name</a>

所以我尝试了

String.prototype.splice = function (idx, rem, s) {
    return (this.slice(0, idx) + s + this.slice(idx + Math.abs(rem)));
};

var text = $('a.active').text();
var ind = text.indexOf('name'); //specify where to add the text
var result = text.splice(ind, 0, '<b class="caret">BOLD</b>');
$('a.active').html(result);

从@user113716's answer得到这个protoype splice。

JSFiddle

【讨论】：

【解决方案4】：

试试：

append() 将内容插入到匹配元素集中每个元素的末尾。

$(".nav .active").append("<b class='caret'></b>");

【讨论】：

【解决方案5】：

你可以使用 .append()

喜欢：

<ul class="nav">
  <li>
    <a id="myelement" class="active">linkname<b class="caret"></b></a>
  <li>
</ul>

javascript：

$("#myelement").append("whatever you want to add after linkname");

【讨论】：

【解决方案6】：

如果您需要在链接名称等文本之后专门添加元素，请尝试 .html() 并替换

$('.active').html(function(){
  return this.innerHTML.replace("linkname","linkname" + '<b class="caret"></b>');
});

DEMO

【讨论】：

【解决方案7】：

快速测试表明这应该可以完成工作：

var c = '<b class="caret"></b>';
$(".active").append(c);

或者作为一个单行...

$(".active").append('<b class="caret"></b>');

【讨论】：

【解决方案8】：

你可以像这样使用append：

$('a.active').append('<b class="caret"></b>');

或者像这样：

var b = '<b class="caret"></b>';
var a = $('a.active');
b.appendTo(a);

或者像这样：

$('a.active').append($('b.caret'));

【讨论】：

【解决方案9】：

试试这个：

 var ele = document.querySelector("a.active");
     ele.innerHTML += "<b class="caret"></b>";

【讨论】：

这是错误的。您的代码将在a 之后创建b 标记，而不是在a 内。参考.after()，您的代码结果将是<a class="active">linkname</a><b class="caret"></b>