无法访问li元素内的span？

Question

我正在制作一个简单的网络应用。在其中的一部分，我有：

<ul class="sortable list-group">
  <li id="firstTag" class="tags list-group-item">
    <span id="present-count" class="badge"></span>
  </li>

我必须同时访问id =“firstTag”的li元素和id =“present-count”的span元素。

无论如何，我只能访问一个，如果我删除了id =“firstTag”，我很容易就能获得跨度，无论如何，在它存在的情况下，js会给出错误：“无法设置属性”innerHTML语句的“null”：

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

编辑：

在window.onload函数中调用两者，并在“present-count”之前调用“firstTag”。看到这个小提琴：http://jsfiddle.net/poddarrishabh/2xzX6/3/

这就是我想要输出的样子：

其中“Present”文本和数字都可以更改。（我正在使用bootstrap）。

Answer 1

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

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

Answer 2

听起来你想创建一个文本节点：

var textNode = document.createTextNode("first");
document.getElementById("firstTag").appendChild(textNode);
document.getElementById("present-count").innerHTML = "something";

或者将文本放在 span：

之前

var textNode = document.createTextNode("first");
var present = document.getElementById("present-count");
present.innerHTML = "something";
document.getElementById("firstTag").insertBefore(textNode, present);

这是updated Fiddle。

Answer 3

如果您只想在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";

Answer 4

试试此代码段

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

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

希望它有所帮助。

Answer 5

尝试添加此

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

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

DEMO

您收到此错误的原因是第一次

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

您正在替换<span>，您的DOM看起来像

<ul class="sortable list-group">
    <li id="firstTag" class="tags list-group-item">
        first
    </li>
</ul>

然后你找不到标识为present-count的元素，因为它不在那里。