javascript - 如何获取列表项Javascript的值/文本

Question

我怎样才能得到一个<li>项目的价值/文本？我在互联网上找到了很多获取下拉列表值的方法。但不是一个<li>项目。

这是我到目前为止所尝试的：

var listt = document.getElementById('content1'); 
var selectedvalue = [listt.selectedIndex].text;

Answer 1

您可以在innerText大多数浏览器中使用该属性，但在textContentFirefox 中使用该属性：

<ul>
    <li id="myLi">Hello, world</li>
</ul>

var li = document.getElementById("myLi")
console.log(li.textContent || li.innerText);

这是一个要演示的小提琴。

如果您使用的是 jQuery（您说您是，但我没有看到任何证据），它就像使用.text()函数一样简单：

$("#myLi").text();

如果您<li>也包含 HTML 标记，那么您可能需要它。在这种情况下，您需要使用该innerHTML属性：

document.getElementById("myLi").innerHTML;

同样，jQuery 有它自己的等效.html()来满足各种不同的浏览器：

$("#myLi").html();

Answer 2

假设myLi是对<li>要获取其文本的元素的引用，它很简单：

myLi.innerText

请注意，<li>元素没有值，因为它们不是输入。它们的内容可以是定义其他页面元素的文本字符串或 HTML。如果您的<li>元素包含其他元素，并且您希望将这些元素的 HTML 作为字符串，您可以改为：

myLi.innerHTML

有什么不同？假设您的 HTML 如下所示：

<li><span>Some text</span></li>

然后

console.log(myLi.innerHTML); // outputs: <span>Some text</span>
console.log(myLi.innerText); // outputs: Some text

Answer 3

如果您的列表项具有 ID 或类名，并且假设您的列表项中没有其他 html，我将只使用 innerHTML。

<ul>
 <li class="list-item">Item1</li>
 <li class="list-item">Item2</li>
 <li class="list-item">Item3</li>
</ul>
<script>
var list = document.getElementsByClassName('list-item');
var listArray=[];
for (var i=0;i<list.length;i++){
listArray.push(list[i].innerHTML);
console.log(listArray[i]);
}
</script>
//output
Item1
Item2
Item3

Answer 4

如果您想获取纯文本，您也可以尝试使用 textContent 属性或 innerHTML 。

var li_item=document.getElementById('content1');
console.log(li_item.textContent)