Question

我尝试使用$('selector').text("")从父元素中删除文本节点，并删除了所有父元素节点。有问题的文本节点在父元素内的两个元素节点之间“浮动”，就像本例中的“或”（HTML由供应商的系统生成）：

<div class="controls" form-inline text-center>
  <input type="hidden" name="add_record" value="1">
    or
  <input type="submit" class="btn btn-info submit" data-id="1" value="Submit & Clear">
  <a name="Submit & Clear" title="'Submit & Clear' submits the current transaction and clears all fields after submission." style="cursor: default"></a>
</div>

我确实找到了正确的方法来删除此文本节点，使用$('selector').contents()然后过滤nodeType === 3，但我想了解为什么我的原始脚本使用text（）删除了元素节点

我设置了一个JSFiddle，其中包含一个正确删除文本节点的脚本，以及一个使用text()并删除所有子节点的脚本。我很感激一些帮助来纠正我对我所期望的text()所做的误解。谢谢。

Answer 1

出于性能和一致性的原因，这就是API的设计方式。

来自the jQuery API Documentation：

.text( text )

返回： jQuery

描述：将匹配元素集中每个元素的内容设置为指定文本。

在性能方面，这种实现最有意义，因为利用HTML元素的内置textContent（或innerText，IE）属性（取代整个具有文本节点的元素的内容），而不是搜索子节点列表并更新找到的任何文本节点。

一致性，.text(text)与.html(html)非常相似，因此有意义的是它们的行为方式类似：用文本数据或html数据替换节点的整个内容

Answer 2

根据我的理解，您可以通过两种方式使用.text()，获取元素的文本或设置元素的文本。

例如，获取元素的文本：

Hello this is text

var text = $('.element').text();返回Hello this is text

var text = $('.element').html();返回Hello this is text

设置元素的文字：

$('.element').text('Hi there'); HTML变为：Hi there

因此，使用text（）进行设置的方法是首先清除元素中的所有内容，并将其替换为传递给text()的参数。

为什么$（'selector'）。text（“”）;除文本节点外还删除元素节点？

2 个答案: