Question

我正在尝试更新标签中的文本，但不以任何方式触摸输入值。

<div id="shippingRates">
    <label>
        <input type="radio" name="shippingrate" class="shippingratequote" value="GUID1" />
        Text I want to Update
    </label>
    <label>
        <input type="radio" name="shippingrate" class="shippingratequote" value="GUID2" />
        Random Text
    </label>
</div>

在控制台中玩，这个Javascript只返回标签的文本：

$('#shippingRates :input[value="GUID1"]').parent().text();

但是如果我执行的话会发生什么：

$('#shippingRates :input[value="GUID1"]').parent().text("TEXT UPDATED!");

它会覆盖Label元素的全部内容，包括输入元素。

我如何使用jQuery / javascript更新文本？

编辑：仅供参考，我无法对HTML进行任何更改，因为它来自外部服务器端功能。

由于

Answer 1

您可以使用DOM来获取输入后的文本节点：

＆＃13;

$('#shippingRates :input[value="GUID1"]')[0].nextSibling.nodeValue= 'TEXT UPDATED!';

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shippingRates">
    <label>
        <input type="radio" name="shippingrate" class="shippingratequote" value="GUID1" />
        Text I want to Update
    </label>
    <label>
        <input type="radio" name="shippingrate" class="shippingratequote" value="GUID2" />
        Random Text
    </label>
</div>

＆＃13;

Answer 2

另一种方法......

$('#shippingRates :input[value="GUID1"]').parent().contents().filter(function(){ 
  return this.nodeType == 3; 
})[1].nodeValue = "The text you want to replace with"

如何更新还包含Input元素的Label文本

2 个答案: