Question

我有简单的表单，为db添加元素。我使用相同的表格进行编辑。我需要将按钮文字从add item更改为edit item。我不知道如何仅在span之后编辑文字而不触摸span。

<button type="submit" id="form-submit" class="btn btn-md pull-right btn-info">
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Add item
</button>

我想要这个：

<button type="submit" id="form-submit" class="btn btn-md pull-right btn-info">
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Edit item
</button>

Answer 1

而不是努力选择特定的文本 - 用label包装并通过jQuery选择它。更加优雅和可读。

Answer 2

直接修改HTML会更好。假设你不能这样做，你需要得到button的textNode并修改它。试试这个：

$('button').contents().filter(function() {
    return this.nodeType == 3 && this.nodeValue.trim() != '';
}).get(0).nodeValue = 'Edit item';

Example fiddle

Answer 3

您可以将lastChild与textContent一起使用。

Live Demo

var txt = document.getElementById('form-submit').lastChild.textContent;

您可以使用childNodes获取特定的孩子

var txt = document.getElementById('form-submit').childNodes[2].textContent;

Answer 4

获取值

$('#form-submit').text(); //gives you 'Add Item' before change

更改值

$('#form-submit').text("Edit Item"); //changes 'Add Item' to 'Edit Item'

你不需要做任何复杂的事情来获取和编辑按钮内的值。

在这种情况下，您甚至不必触摸span元素。它只是提取<button>元素中的纯文本。

Answer 5

尝试这个简单的一行，它可能有所帮助。

$('#form-submit:contains("Add item")').text('Edit Item');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="submit" id="form-submit" class="btn btn-md pull-right btn-info">
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Add item
</button>

在元素后更改文本

5 个答案: