是否可以仅更改标签中的文本（没有其他元素）？ [复制]

Posted 2023-05-07

【中文标题】是否可以仅更改标签中的文本（没有其他元素）？ [复制]

【英文标题】：Is it possible to change only text in label (no other elements)? [duplicate]

【发布时间】：2019-09-30 05:04:45

【问题描述】：

我想从以下标签中删除文本（用 * 突出显示），但是我想保持标签元素后代的所有其他文本内容完整且不受影响。我怎样才能做到这一点？

这是我的 html 示例：

<label class="has-checkbox terms">
    <input name="order[terms]" type="hidden" value="0">
    <div class="icheckbox_minimal" style="position: relative;">
        <input class="checkbox" type="checkbox" value="1" name="order[terms]" id="order_terms">
        <ins class="iCheck-helper"></ins>
    </div>
    *ich habe die*
    <a href="#">AGBs</a>
    *gelesen und stimme diesen zu.* 
    <span class="terms-error"></span>
</label>

【问题讨论】：

它不是重复的 :)。

@MaxGrünfeld 您想从label 中删除*ich habe die* 和*gelesen und stimme diesen zu.*，同时保留HTML 的其余部分，例如this？如果是这样，它是我链接的另一个问题的副本。如果不是，您可能想详细说明您的问题

@empiric 我的意思是 MiXT4PE :)。你完全正确！

【参考方案1】：

如果我理解正确，您希望删除直接包含在 <label> 元素中的文本，而不影响标签其他后代元素的文本。

这可以在没有 jQuery 的情况下通过迭代 <label> 元素的 childNodes 并清除每个文本节点的 textContent 来实现，如下所示：

const label = document.querySelector('label');

/* Iterate the nodes of the label */
for(const node of label.childNodes) 

  /* Clear the text content of each child node 
  that is a text node */
  if(node.nodeName === '#text') 
    node.textContent = '';
   

<label class="has-checkbox terms">
    <input name="order[terms]" type="hidden" value="0">
    <div class="icheckbox_minimal" style="position: relative;">
        <input class="checkbox" type="checkbox" value="1" name="order[terms]" id="order_terms">
        <ins class="iCheck-helper"></ins>
    </div>
    *ich habe die*
    <a href="#">AGBs</a>
    *gelesen und stimme diesen zu.* 
    <span class="terms-error"></span>
</label>