javascript - jQuery - 仅设置元素的文本而不删除其他元素( anchor )

Question

我有一个像这样的元素:

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

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

元素内容的顺序可能会有所不同(之前或之后的文本)，并且实际文本未知。

谢谢

新更新

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

    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>