[英]Unable to access span inside an li element?
I am making a simple web app. 我正在制作一个简单的网络应用程序 In one part of it, I have: 在其中的一部分,我有:
<ul class="sortable list-group">
<li id="firstTag" class="tags list-group-item">
<span id="present-count" class="badge"></span>
</li>
I have to access both the li element with id="firstTag" and the span element with id="present-count". 我必须访问id =“firstTag”的li元素和id =“present-count”的span元素。
Anyhow, I am able to access only one, if I remove the id="firstTag", I am easily able to acess the span, anyhow, in presence of it, js gives the error: "cannot set property "innerHTML" of null" for the statement: 无论如何,我只能访问一个,如果我删除id =“firstTag”,我很容易就能获得跨度,无论如何,在它存在的情况下,js会给出错误:“无法设置属性”innerHTML“为null “声明:
document.getElementById("present-count").innerHTML = something;
EDIT: 编辑:
Both are being called in window.onload function with "firstTag" called before "present-count". 两者都在window.onload函数中被调用,其中“firstTag”在“present-count”之前调用。 See this fiddle: http://jsfiddle.net/poddarrishabh/2xzX6/3/ 看到这个小提琴: http : //jsfiddle.net/poddarrishabh/2xzX6/3/
This is what I want the output to look like: 这就是我想要输出的样子:
where both the "Present" text and the number can be changed.(I am using bootstrap). 其中“Present”文本和数字都可以更改。(我正在使用bootstrap)。
$("#firstTag #present-count").html();
将jquery文件添加到您的页面并尝试此操作
Sounds like you want to create a text node: 听起来你想要创建一个文本节点:
var textNode = document.createTextNode("first");
document.getElementById("firstTag").appendChild(textNode);
document.getElementById("present-count").innerHTML = "something";
Or to put the text before the span: 或者在跨度之前放置文本:
var textNode = document.createTextNode("first");
var present = document.getElementById("present-count");
present.innerHTML = "something";
document.getElementById("firstTag").insertBefore(textNode, present);
Here is an updated Fiddle . 这是一个更新的小提琴 。
If you are just trying to put some text before the present-count
span, then just add another span and target that instead of the wrapping li
: 如果您只是尝试在present-count
范围之前放置一些文本,那么只需添加另一个跨度和目标而不是包装li
:
<ul class="sortable list-group">
<li id="firstTag" class="tags list-group-item">
<span id="another-tag"></span>
<span id="present-count" class="badge"></span>
</li>
document.getElementById("another-tag").innerHTML = "some text";
document.getElementById("present-count").innerHTML = "some more text";
Try this code snippet 试试这段代码
document.getElementById("firstTag").innerHTML = document
.getElementById("firstTag")
.innerHTML
+ "first";
document.getElementById("present-count").innerHTML ="something";
Hope it helps. 希望能帮助到你。
Try adding this 尝试添加此功能
document.getElementById("firstTag").innerHTML ='<span id="present-count" class="badge">'
+ '</span>'
+ ' first';
document.getElementById("present-count").innerHTML = 'something';
You were getting this error because with the first 你得到这个错误是因为第一个错误
document.getElementById("firstTag").innerHTML = "first"
you were replacing the <span>
, and your DOM looked like 你正在替换<span>
,你的DOM看起来像
<ul class="sortable list-group">
<li id="firstTag" class="tags list-group-item">
first
</li>
</ul>
Then you couldnt find the element with id present-count
because it wasnt there. 然后你找不到具有id present-count
的元素,因为它不在那里。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.