获取列表项的文本内容

Get Text Content of list item

本文关键字：文本 列表 获取      更新时间：2023-09-26

我的html页面中有两个列表项。我想访问"第一个无序列表"中存在的"第一个列表项"的"文本内容"。我需要用javascript而不是jquery来做。这是我尝试过的，但似乎不起作用。

<html>
<head>
 <title>dom</title>
 <script type="text/javascript"> 
 function createcontent(){    
      var val = document.getElementsByTagName("ul")[0].childNodes[0].nodeValue;
      document.getElementById("content").innerHTML = val;
    }
 </script>
</head>
<body onload="createcontent();">
<ul>
    <li>Milk</li>
    <li>cured</li>
    <li>eggs</li>
</ul>
<ul>
    <li>cabbage</li>
    <li>califlower</li>
    <li>apple</li>
</ul>
<p id="content"></p>
</body>
</html>


<html>
<head>
 <title>dom</title>
 <script type="text/javascript"> 
 function createcontent(){    
      var val = document.getElementsByTagName("ul")[0].children[0].innerText;
   alert(val);
      document.getElementById("content").innerHTML = val;
    }
 </script>
</head>
<body onload="createcontent();">
<ul>
    <li>Milk</li>
    <li>cured</li>
    <li>eggs</li>
</ul>
<ul>
    <li>cabbage</li>
    <li>califlower</li>
    <li>apple</li>
</ul>
<p id="content"></p>
</body>
</html>

相关文章：