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

【问题标题】：How can I get every LI element's innerHTML and display as string?如何获取每个 LI 元素的 innerHTML 并显示为字符串？
【发布时间】：2021-06-24 22:14:20
【问题描述】：

我试图获取每个 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;
    }

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

【问题讨论】：

标签： javascript html string element

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

像这样的单行选项不是最好的学习方法，但知道你会得到许多不同的答案，我想我会选择不同的东西。这是单行：

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

以下是与 cmets 关于其工作原理的相同内容：

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>

【讨论】：