Question

给出一个带图标的按钮：

<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    People <span class="caret"></span>
</button>

我想替换文本People并保留按钮的html部分。

我的情况可能需要一些灵活性。我可能不知道按钮的内部html。

生成的html类似于：

<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    Jeff <span class="caret"></span>
</button>

我碰巧使用jQuery，如果我这样做：

$('button.dropdown-toggle').text('Jeff');

显然，这将删除插入符号。我不想删除插入符号。

我知道我可以通过.children()获得插入符号。但是我不一定知道html元素的顺序。也许插入符号是第一个，或者它可能是放在文本之后，它可以是任何顺序。如果有两个图标怎么办？我想只替换按钮的文本并保留html。

我通常无法控制按钮中的HTML。

Answer 1

你可能不需要jQuery。

如果文本节点的位置已知，您只需访问.caret元素的上一个兄弟文本节点并直接更改该值：

＆＃13;

document.querySelector('.btn .caret').previousSibling.nodeValue = 'Something';

＆＃13;

.caret {
  display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid\9; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

＆＃13;

<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    People <span class="caret"></span>
</button>

＆＃13;

或者，如果文本的位置不同，您也可以使用.content()方法检索子元素和文本节点。迭代值并确定它是否是文本节点并进行更改。

＆＃13;

$('.btn').contents().each(function() {
   if (this.nodeType === 3 && this.nodeValue.trim()) {
     this.textContent = 'Something';
   }
})

＆＃13;

.caret {
  display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid\9; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    People <span class="caret"></span>
</button>

＆＃13;

Answer 2

您可以像这样更改为按钮名称添加内部范围：

<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
 <span id='innerBtn'>Jeff <span>
<span class="caret"></span>
</button> 

$("#innerBtn").html('TEXT CHANGE');

如果您无法访问HTML，请尝试以下操作：

$('.btn btn-default').html($('.btn btn-default').html().replace('Jeff','TEXT CHANGE'));

Answer 3

var strNewString = (your class name or div name).html().replace('people','Jeff');

your class/div.html(strNewString);

这会将字符串'people'替换为 Jeff 。

Answer 4

Put＆＃34; People＆＃34;它本身在标签中并更改该标签的内容。这可以容纳按钮内部HTML的更多更改，而无需确保唯一的文本，第一个文本，插入符号的兄弟等等是要替换的元素，并且无论文本是否为＆＃39; People＆＃39 ;变化。

＆＃13;

document.querySelector('.btn .target').innerHTML = 'Something';

＆＃13;

.caret {
  display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid\9; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

＆＃13;

<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
    <span class='target'>People</span> <span class="caret"></span>
</button>

＆＃13;

Answer 5

尝试，像这样。

function change() {

  var c = $("button").children();
  $("button").text("second ").append(c);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="change()">first <span>Span</span>
</button>

替换/更改按钮的文本但保留内部html元素

5 个答案: