javascript - 如何用没有名称或 ID 的 javascript 替换标签中的文本？

Question

我正在使用 datatables jquery 插件来美化我的表格。我正在尝试将搜索框风格化，使其看起来更像这样

但是，为数据表中的当前搜索框生成的 javascript代码看起来像这样

<div class="dataTables_filter" id="countstable_filter">
    <label>Search: 
          <input type="text" aria-controls="countstable" placeholder="Search">
    </label>
 </div>

我能够让 javascript 将占位符属性添加到搜索框。但我不知道如何删除 Search: 文本。我在谷歌上看到了一些解决方案，但他们要求标签有一个我在这里没有的 id。

Answer 1

Search:由于您使用的是 DataTables，您还可以通过更改语言变量来关闭字符串，请参阅有关oLanguage.sSearch和jsBinsSearch的更多文档。

$("#someTable").dataTable({
  oLanguage: {
    sSearch: ""
  }
});

Answer 2

您可以删除包含Search:使用的文本节点：

$("#countstable_filter label").contents().first().remove();

.first()是因为它是标签的第一个节点（文本节点）。.contents()和之类的功能.first()使您无需 ID 即可查找节点（遍历 DOM）。从本质上讲，您从一个元素开始，然后使用特定的函数遍历 DOM，直到找到想要的元素。

Answer 3

var x=document.getElementsByTagName("input");
for(var i=0;i<x.length;i++){
    var obj = x[i];
    if(obj.getAttribute("type")=='text' && obj.getAttribute("aria-controls")=='countstable' && obj.getAttribute("placeholder")=='Search'){
    // do stuff with the object
}
}

Answer 4

var label = $('label', '.dataTables_filter');
    label.html(label.children());

小提琴

children()不会包含文本节点，所以只用元素重写内容，去掉文本节点。