Unable to access span inside an li element?

Question

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".

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:

document.getElementById("present-count").innerHTML = something;

EDIT:

Both are being called in window.onload function with "firstTag" called before "present-count". See this fiddle: 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).

Answer 1

    $("#firstTag #present-count").html();

将jquery文件添加到您的页面并尝试此操作

Answer 2

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 .

Answer 3

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 :

<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";

Answer 4

Try this code snippet

document.getElementById("firstTag").innerHTML = document
                                                   .getElementById("firstTag")
                                                   .innerHTML 
                                              + "first";

document.getElementById("present-count").innerHTML ="something";

Hope it helps.

Answer 5

Try adding this

document.getElementById("firstTag").innerHTML ='<span id="present-count" class="badge">' 
                                              + '</span>' 
                                              + ' first';

document.getElementById("present-count").innerHTML = 'something';

DEMO

You were getting this error because with the first

document.getElementById("firstTag").innerHTML = "first"

you were replacing the <span> , and your DOM looked like

<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.