如何仅清除含文本与input的td标签内文本且保留input元素？

现有HTML代码如下：

<td id="gender3" name="gender">Male
    <input id="gender_input3" type="text" style="border:ridge;width:90px; display: none" name="gender" >      
</td>

该td标签内包含文本内容与input元素。触发特定操作时，希望仅清除td内的文本内容，但使用以下JavaScript代码会同时移除input元素：

td = document.getElementById("gender3")
td.innerText = ""

请问如何实现仅清除td内文本且保留input元素的需求？

解决方案 #

方法1：遍历子节点，仅删除文本节点 #

遍历目标td的所有子节点，筛选出文本节点（nodeType === 3）并移除，以此保留input这类元素节点：

const td = document.getElementById("gender3");
// 倒序遍历避免删除节点后索引错位
for (let i = td.childNodes.length - 1; i >= 0; i--) {
  const node = td.childNodes[i];
  if (node.nodeType === 3) {
    td.removeChild(node);
  }
}

方法2：暂存input后重置td #

先把td中的input元素取出，清空td内容后再将input重新插入：

const td = document.getElementById("gender3");
const input = document.getElementById("gender_input3");
td.innerHTML = "";
td.appendChild(input);

方法3：直接清空目标文本节点 #

如果明确文本节点的位置（比如是td的第一个子节点），可以直接清空其内容：

const td = document.getElementById("gender3");
const textNode = td.childNodes[0];
if (textNode && textNode.nodeType === 3) {
  textNode.textContent = "";
}

内容的提问来源于stack exchange，提问作者Alston