如何获取每个 LI 元素的 innerHTML 并显示为字符串？

Question

我试图获取每个 LI 元素的内容并按顺序显示每个变量。我正在使用这个简单的练习来演示这一点，因为我刚刚编写了它并且确定它会起作用。

有 3 个列表项：Mac、PC 和 Linux。当我想在其他地方显示时，只有 Linux 出来。我做错了什么？

<html>
<body>
    <p id="demo"></p>
    <ul>
        <li>Mac</li>
        <li>PC</li>
        <li>Linux</li>
    </ul>
</body>
</html>

    var list = document.querySelectorAll("LI");
    for (var i = 0; i < list.length; i++) {
        const computers = list[i].innerHTML;
        var all = computers.toString();
document.getElementById("demo").innerHTML = all;
    }

最后一点，我如何为每个获取的元素设置一个变量？我想你可以使用 FOR 来做到这一点，但不知道如何为每个变量设置一个自变量。

Answer 1

1) 你应该使用 textContent 而不是 innerText.

2)你可以创建一个数组，然后把数据压入其中。

3) 最终，您将得到一个数组中的所有 computers 个字符串。然后你可以使用 join 它们以逗号分隔 ,

var list = document.querySelectorAll("LI");

const arr = [];

for (var i = 0; i < list.length; i++) {
  const computers = list[i].textContent;
  arr.push(computers);
}

document.getElementById("demo").innerHTML = arr.join(", ");

<p id="demo"></p>
<ul>
  <li>Mac</li>
  <li>PC</li>
  <li>Linux</li>
</ul>

Answer 2

您的代码存在非常小的问题

试试这个

<html>
    <head>
        <script>
        function showLi(){
            var list = document.querySelectorAll("LI");
            var computers='';
            for (var i = 0; i < list.length; i++) {
                computers += list[i].innerHTML;
                var all = computers.toString();
                document.getElementById("demo").innerHTML = all;
            }
        }
        </script>
    </head>
<body onload="showLi();">
    <p id="demo"></p>
    <ul>
        <li>Mac</li>
        <li>PC</li>
        <li>Linux</li>
    </ul>
</body>
</html>

Answer 3

innerHTML覆盖当前节点内html，这样你会一直显示最后一台电脑。

尝试这样的事情：

var computers = ''; // variable to contain the final string
var list = document.querySelectorAll("LI");
for (var i = 0; i < list.length; i++) {
    const computer = list[i].innerHTML; // here you are getting only the li string
    // var all = computers.toString();
    // document.getElementById("demo").innerHTML = all;
    computers += `${computer}, ${computer}`;
}
document.getElementById("demo").innerHTML = computers; // outside for loop

Answer 4

这是一个单行代码，它为您提供一个变量 os_list（当您运行时查看 console.log）并设置 #demo 元素。

像这样的单行选项不是学习的最佳选择，但知道您会得到许多不同的答案，我想我会选择不同的东西。这是一条线：

let d=document, os_list = d.querySelector('#demo').innerHTML=[...d.querySelectorAll("li")].map(e=>e.innerText).join(', ');

下面是关于它如何运作的评论：

let d=document, 
// this lets us use 'document' in a shortened way
    os_list = d.querySelector('#demo').innerHTML= 
    // our eventual target element whose innerHTML will be populated with our result plus our variable name 'os_list' which will also get the result
     [...d.querySelectorAll("li")] 
     // the [...spread] syntax - this basically says take the HTML collection of <li> elements and make it iterable like an array
     .map(e=>e.innerText) 
     // map lets us take each <li> element and return the inner text. Basically we're swapping the element for the text here
     .join(', '); 
     // all that gave us an array, and join() lets us combine it back into a comma separated string

let d=document, os_list = d.querySelector('#demo').innerHTML=[...d.querySelectorAll("li")].map(e=>e.innerText).join(', ');
console.log(os_list)

<ul>
  <li>Mac</li>
  <li>PC</li>
  <li>Linux</li>
</ul>
<hr>
Result:
<p id="demo"></p>

如何获取每个 LI 元素的 innerHTML 并显示为字符串？

How can I get every LI element's innerHTML and display as string?

html

javascript

string

element