正文 

当前位置： 首页 > 问答 >

如何使用 javascript 定位 li 中的元素

     2023-03-05     174

关键词：

【中文标题】如何使用 javascript 定位 li 中的元素【英文标题】：How to target elements in li with javascript 【发布时间】：2021-12-23 22:12:45 【问题描述】：

这是一段 javascript 代码，例如我想更改嵌套在 li 中的 span 中的文本。我如何使用 DOM 来定位这些元素？

var body = document.getElementsByTagName('body')[0]
body.style.fontFamily = "Arial";
var name = document.getElementsById('name');
var index = document.getElementsById('index');
var hometown = document.getElementsById('hometown');
name.innerHTML = "NAME";
index.innerHTML = "INDEX";
hometown.innerHTML = "HOMETOWN";
<h1>About Me</h1>
<ul>
  <li>Name: <span id="name"></span></li>
    <li>Index: <span id="index"></span></li>
      <li>Hometown: <span id="hometown"></span></li>
</ul>

【问题讨论】：

@mplungjan “Typo.getElementById 是单数”是什么意思？ 【参考方案1】：

首先你在getElementsById 中有错字，应该是getElementById。 其次，您应该 += HTML 而不仅仅是 =，因为它会删除 HTML 中的文本并将其替换为您在 JavaScript 中设置的值。 最后一点，最好给&lt;li&gt;一个id，我认为这比制作span更足够。

这是固定的 HTML 和 JS：

document.getElementById("name").innerHTML += "anything";
document.getElementById("index").innerHTML += "anything";
document.getElementById("hometown").innerHTML += "anything";
<h1>About Me</h1>
<ul>
  <li id="name">Name:
    <li id="index">Index:
      <li id="hometown">Hometown:
</ul>

【讨论】：

1.我想我们已经讨论了死亡的拼写。 2. 跨度是空的，所以不需要 += 除非你像以前那样删除跨度【参考方案2】：

您在脚本中有拼写错误 getElementById 而不是 getElementsById

HTML 也有一些标签问题

试试这个

<ul>
  <li>Name: <span id="name"></span></li>
  <li>Index: <span id="index"></span></li>
  <li>Hometown: <span id="hometown"></span></li>
</ul>



    var body = document.getElementsByTagName('body')[0]
    body.style.fontFamily = "Arial";
    var name = document.getElementById('name');
    var index = document.getElementById('index');
    var hometown = document.getElementById('hometown');
    name.innerHTML = "NAME";
    index.innerHTML = "INDEX";
    hometown.innerHTML = "HOMETOWN";

【讨论】：

var name 和 name.innerHTML="NAME" 不起作用。【参考方案3】： 错字：getElementById 是单数 - 它是 getElementById 而不是 getElementsById 也没有与页面中的 ID 同名的 var - 它隐藏了 var 另外，出于格式化原因，请关闭&lt;li&gt; 

var body = document.getElementsByTagName('body')[0]
body.style.fontFamily = "Arial";
var nameSpan = document.getElementById('name'); // either change the var or the ID - I suggest the ID since name is used in several places like window.name etc
var index = document.getElementById('index');
var hometown = document.getElementById('hometown');
nameSpan.innerHTML = "NAME";
index.innerHTML = "INDEX";
hometown.innerHTML = "HOMETOWN";
<h1>About Me</h1>
<ul>
  <li>Name: <span id="name"></span></li>
  <li>Index: <span id="index"></span></li>
  <li>Hometown: <span id="hometown"></span></li>
</ul>

【讨论】：

如何正确使用 Javascript 来定位 Shiny 中的 gt 表行元素

】如何正确使用Javascript来定位Shiny中的gt表行元素【英文标题】：HowtouseJavascriptcorrectlytotargetgttablerowelementsinShiny【发布时间】：2021-05-1817:19:54【问题描述】：我正在使用gt表制作一个闪亮的应用程序。如果大写，我想将.gt_group_head... 查看详情

如何通过javascript单击Selenium中的Li元素

】如何通过javascript单击Selenium中的Li元素【英文标题】：HowtoclicktheLielementinSeleniumbyjavascript【发布时间】：2020-07-2805:33:12【问题描述】：我想知道我们如何通过javascript单击硒脚本中li元素内的项目。我尝试了几种方法，但它可以... 查看详情

如何使用 webpack 将本地图像加载到 html 中的元标记

】如何使用webpack将本地图像加载到html中的元标记【英文标题】：Howtoloadlocalimagetometataginhtmlwithwebpack【发布时间】：2019-03-2710:21:17【问题描述】：我有一个应该像这样的元标记<metaproperty="og:image"content="https://mywebsite/img.jpg"/>我... 查看详情

如何使用 javascript 或 jquery 在 iframe 中获取 li 数据属性

】如何使用javascript或jquery在iframe中获取li数据属性【英文标题】：Howtogetlidataattributeinsideiframeusingjaavascriptorjquery【发布时间】：2020-11-2709:55:53【问题描述】：我想从iframe中获取li元素的数据属性。iframe包含另一个域的链接。所以... 查看详情

如何使用 Javascript 在浏览器中通过 X-Y 坐标定位？

】如何使用Javascript在浏览器中通过X-Y坐标定位？【英文标题】：HowdoIuseJavascripttolocatebyX-YCoordinatesinmybrowser?【发布时间】：2010-09-0905:19:46【问题描述】：我正在努力做到这一点，当用户向下滚动页面，单击链接，做他们需要做的... 查看详情

如何使用 Xpath、css 或 Selenium 中的任何其他定位器在 html 中的结束标记后查找带有“== $0”的元素

】如何使用Xpath、css或Selenium中的任何其他定位器在html中的结束标记后查找带有“==$0”的元素【英文标题】：Howtofindelementwith"==$0"afterendtaginhtmlusingXpath,cssoranyotherlocatorsinSelenium【发布时间】：2020-03-2021:00:53【问题描述】：... 查看详情

如何更新 AngularJS 中的元标记？

】如何更新AngularJS中的元标记？【英文标题】：HowcanIupdatemetatagsinAngularJS?【发布时间】：2013-04-1317:15:38【问题描述】：我正在使用AngularJS开发一个应用程序。我想在路线更改时更新元标记。如何更新AngularJS中可以显示在页面“查... 查看详情

如何在单击 javascript 时使用导航栏链接切换活动类

】如何在单击javascript时使用导航栏链接切换活动类【英文标题】：Howtotoggleactiveclasswithnavbarlinksonclickjavascript【发布时间】：2021-10-1109:16:41【问题描述】：我试图在单击时将“li-active”类切换到我的每个导航栏链接li。此时，在第... 查看详情

如何仅使用 JavaScript 定位 Internet Explorer 11？

】如何仅使用JavaScript定位InternetExplorer11？【英文标题】：HowcanItargetonlyInternetExplorer11withJavaScript?【发布时间】：2013-07-0102:33:30【问题描述】：使用JavaScript仅针对IE11最不容易出错的方法是什么？注意：这实际上应该只用于分析或... 查看详情

如何修复特征联合和管道中的元组对象错误（使用 sklearn 时）？

】如何修复特征联合和管道中的元组对象错误（使用sklearn时）？【英文标题】：Howtofixtupleobjecterrorinfeatureunion&pipelines(whileusingsklearn)?【发布时间】：2019-06-0120:24:08【问题描述】：我有一个56列的pandas数据框。大约一半的列是浮... 查看详情

如何使用 javascript 定位 Edge 浏览器

】如何使用javascript定位Edge浏览器【英文标题】：HowtotargetEdgebrowserwithjavascript【发布时间】：2015-10-2115:53:03【问题描述】：我知道您应该尽可能进行功能检测，但是如果浏览器是MicrosoftEdge浏览器，您能否在Javascript中检测？我维... 查看详情

web设计中用ul和li写的菜单如何定位，动态的进行增加删除？

...lock;"><li><aid="sectorOperationList"href="javascript:tog('father1');">管理部门</a><ulid="father1"style="display:none;"><li><ahref="sectorAdd.htm"target="corganizeRightFrame">新增部... 查看详情

如何比较和搜索列表中的元素与列表 SML 中的元组

】如何比较和搜索列表中的元素与列表SML中的元组【英文标题】：HowtocompareandsearchforanelementinalistwithatupleinsidealistSML【发布时间】：2021-11-0105:02:18【问题描述】：我想在元组列表中的每个第二个元素中使用searchingElements列表进行搜... 查看详情

如何更新存储在 ets 表中的元组中的数字？

】如何更新存储在ets表中的元组中的数字？【英文标题】：Howtoupdateanumberinsideatuplestoredinanetstable?【发布时间】：2018-06-0921:23:38【问题描述】：假设我有一个像这样的ets表：I=ets:new(mytable,[named_table,set]).ets:insert(I,10,10,4,"description").... 查看详情

是否可以使用 JavaScript 来更改页面的元标记？

】是否可以使用JavaScript来更改页面的元标记？【英文标题】：IsitpossibletouseJavaScripttochangethemeta-tagsofthepage?【发布时间】：2011-02-0320:31:24【问题描述】：如果我在头部放置一个div并显示：none，而不是使用JavaScript显示它，这会起作... 查看详情

地理定位功能中的 JavaScript 变量范围

】地理定位功能中的JavaScript变量范围【英文标题】：JavaScriptvariablescopeingeolocationfunction【发布时间】：2012-02-0300:36:10【问题描述】：我正在尝试使用javascript来获取用户的地理位置，这样我就可以将该信息用作另一部分javascript代... 查看详情

基于echarts在使用过程中的有关javascript的总结（入门级）

step1：页面上在一段区域上从左到右添加三个同一类型的"pie"饼图，但是数据不一样时，如何减少不必要的重复代码段呢？首先，html页面代码如下：<ulclass="order-infoList"><li><divid="order-category"style="width:100%;height:100%"><... 查看详情

如何使用 JavaScript 更改 embed src 的值？

】如何使用JavaScript更改embedsrc的值？【英文标题】：HowtochangethevalueofembedsrcwithJavaScript?【发布时间】：2011-10-0213:11:54【问题描述】：我刚刚开始学习JS。我正在尝试在我的HTML代码中的标签中更改embedsrc的值。但是我无法使用我编... 查看详情