如何将内部html的文本更改为id的文本

Posted 2023-02-22

【中文标题】如何将内部html的文本更改为id的文本

【英文标题】：how Change the text of the inner html to that of the id

【发布时间】：2020-02-02 03:48:35

【问题描述】：

我需要编写一个名为的函数，它接受一个参数，这是一个元素列表。在元素列表中有一个元素有一个 ID，但我不知道这个 ID 叫什么。该函数应将元素的内部文本更改为 ID 的值。 示例：

<div><div/>
<div><div/>
<div><div/>
<div id="special"><div/>
<div><div/>

let divs = querySelectorAll('div')
findId(divs)

应该怎么做：

<div><div/>
<div><div/>
<div><div/>
<div id="special">special<div/>
<div><div/>

我尝试过使用 innerhtml，但我不知道该怎么做，因为 id 是未知的。 请帮忙。

【参考方案1】：

类似的东西；

function change(divs)
  divs.forEach((div) => 
    if(div.id)
      div.innerHTML = div.id;
    
  )


let divs = document.querySelectorAll('div');
change(divs);

<div></div>
<div id="special"></div>
<div></div>
<div></div>

【讨论】：

ES6 语法实际上更快。 ***.com/questions/50844095/…

这值得投反对票吗？永远不会引起注意的事情......只有在需要时（在这个级别上）才能提高你的表现，否则你将很难过。当某事不是正确答案时投反对票，而不是因为您的偏好。在这里提供帮助应该是一件好事，而不是一件坏事。

【参考方案2】：

遍历元素列表并通过css 选择器检查它们：.matches('div[id]')。使用找到的textContent。

let divs = document.querySelectorAll('div');
let result = findId(divs);
console.log(result);


function findId(list) 
    for (var i = 0; i < list.length; i++) 
      if (list[i].matches('div[id]')) 
        return list[i].textContent;
      
    
    return null;

【讨论】：

不要只是添加代码，解释代码的作用以及它如何解决 OP 的问题。

【参考方案3】：

const theDivs = document.querySelectorAll('div');

if (theDivs) 
  theDivs.forEach(function(el) 

  if (el.id) 
    el.innerHTML = el.id;
  

  );
 else 
  alert('Sorry, no divs found buddy');

div 
  padding: 1rem;
  border: lightgray 1px dotted;
  width: 10rem;

<div></div>
<div></div>
<div id="special"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

【参考方案4】：

现代语法：

let divs = document.body.querySelectorAll("div");
for (const div of divs) 
  if (div.hasAttribute("id")) 
    const id = div.id;
    div.innerHTML = id;
  

【参考方案5】：

要确定元素是否有 ID，您可以使用 hasAttribute() 方法：

// Array.prototype.slice.call() is an easy way to turn the NodeList document.querySelector returns into an array.
const divs = Array.prototype.slice.call(document.querySelectorAll('div'));

const haveIds = divs.filter(element =>
  element.hasAttribute('id')
);

console.log(haveIds);

<div>A</div>
<div>B</div>
<div id="me">C</div>
<div>D</div>
<div id="me-too">E</div>

或者，您也可以使用querySelector 本身来确定它：

const withIds = document.querySelectorAll('div[id]');

console.log(withIds);

<div>A</div>
<div>B</div>
<div id="me">C</div>
<div>D</div>
<div id="me-too">E</div>

[id] 部分的基本意思是“如果它具有属性 ID”。

无论您选择哪种方法，您只需循环并将 innerText 设置为它们的 ID：

const withIds = Array.prototype.slice.call(document.querySelectorAll('div[id]'));

withIds.forEach(element => element.innerText = element.id);

<div>A</div>
<div>B</div>
<div id="me">C</div>
<div>D</div>
<div id="me-too">E</div>

【讨论】：

只是指出您不需要在最后一个 sn-p 中对 querySelectorAll 进行切片； NodeList 有一个与 Array 相同的 forEach 方法:)

是的，尽管我通常仍然更喜欢将其转换为数组，因为 NodeList 的 Array 方法的子集非常有限，所以如果您的情况不像调用 forEach() 那么简单'会想要转换它。

我很好奇传播它是否比调用 slice 转换效率更高、更少或同样有效......我要测试一下！ 来自未来的消息： Slice 显然是传播速度的两倍。去图吧。