Question

我有一个像这样的元素：

<td>
  <a>anchor</a>
  [ some text ]
</td>

我需要在jQuery中设置它的文本，而不删除锚点。

元素的内容可能会有所不同（文本在之前或之后），实际文本是未知的。

由于

新更新

这就是我使用的，只假设一个文本节点：

    function setTextContents($elem, text) {
        $elem.contents().filter(function() {
            if (this.nodeType == Node.TEXT_NODE) {
                this.nodeValue = text;
            }
        });
    }

    setTextContents( $('td'), "new text");

Answer 1

Neal's answer是我的建议。 jQuery没有办法选择文本节点How do I select text nodes with jQuery?。

更改HTML结构将构成最简单的代码。如果你不能这样做，你可以使用childNodes属性寻找类型3的节点（TEXT_NODE）

以下是一些示例代码，假设最后一个节点是您要编辑的节点。这是一种比替换td的全部内容更好的方法，因为在重新创建HTML时可能会丢失事件处理程序

$('a').click(() => console.log('<a> was clicked'))

$('#btn').click(() =>
  $('.someClass').get(0).lastChild.nodeValue = " New Value");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='someClass'>
  <a href="javascript:void(0)">anchor</a> [ some text ]
</div>

<button id='btn'> Change text without losing a tag's handler</button>

Answer 2

如果可以将文本放在一个范围内：

<td id='someID'>
  <a>anchor</a>
  <span>[ some text ]</span>
</td>

你可以这样做：

$('td#someID span').text('new text')

Answer 3

不改变标记：

<强> Live Demo

var anchor = $('td').find('a').clone();
$('td').text('{ some other text }').prepend(anchor);

jQuery - 仅设置元素的文本而不删除其他元素（锚点）

3 个答案: