100分求此答案 关于JS动态增删改li节点数据的问题

Question

<div id="Category"></div>
在这个DIV里，是页面加载的时候从数据库中加载数据到这个div里面加载完成之后是<div id="Category">
<li id="li_1">
  ID 为1 
  <li id="li_1.1">
    ID 为1.1
  </li>
</li>
</div>这种类型的，当然，因为是动态加载，所以在浏览器查看源代码里面只有
<div id="Category">
</div>
请问我如何通过JS来 删除和添加这些li节点呢？

Answer 1

虽然查看源码只有
<div id="Category">
</div>但是里面实际已经有li了，可以用各种dom操作

Answer 2

但是我无论怎么操作都获取不到child， 而且Category的child length始终为1

Answer 3

但是我无论怎么操作都获取不到child， 而且Category的child length始终为1

Answer 4

删除节点
var x=document.getElementById("li_1");
document.getElementById("Category").removeChild(x);动态添加的话 就是
var li=document.createElement("li");
document.getElementById("Category").appendChild(li);

Answer 5

document.getElementById("Category").childNodes.length是0？？？？

Answer 6

首先LZ的代码就有问题，li还是用ul套好

Answer 7

是用ajax请求服务器生成的吧，如果后台生成的话是能看到源代码的。

Answer 8

你的LI是嵌套的，所以Category的child肯定只有一个。可以用Category.child[0].child
试试，或者document.getElementById("Category").getElementsByTagName('li')访问所有的
li

Answer 9

可以抓到Category的innerHTML,有东西的话，就可以get到下面的元素

Answer 10

li的正确写法应该是<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 11

先学html 再学javascript!标签多了。没必要都设置ID可以用 objDom.getElementsByTagName 获取

Answer 12

首先楼主的li没有写在ul里面，嵌套的不对，根据DOM树解析的Category确实只有一个child.li里面如果要再嵌套li,要这样写
<ul>
  <li></li>
  <li>
    <ul>
        <li>
        </li>
    </ul>
  </li>
</ul>

Answer 13

roominfo:ajax返回回来的一个josn数据对象$(roominfo).each(function (indexEntry, entry) {
        if (parseInt(entry['roomTypeId']) == roomTypeId) {
            var roomAddBed = entry['roomAddBed'];
            var _html = [];
            _html.push('<img src="/upload_files/thumbnail2/' + entry['roomImage'] + '" width="170px" heigth="133px" style="float:left"/>');
            _html.push('<ul class="searchresult_caplist" style="float:left">');
            _html.push('<li title="：' + entry['roomTypeName'] + '">房间名称：' + entry['roomTypeName'] + '</li>');
            _html.push('<li title="面积：' + entry['roomArea'] + '平方米">面积：' + entry['roomArea'] + '平方米</li>');
            _html.push('<li title="楼层：' + entry['roomFloor'] + '层">楼层：' + entry['roomFloor'] + '层</li>');
            _html.push('<li title="' + roomAddBed + '">' + roomAddBed + '</li>');
            _html.push('<li title="无烟房：' + entry['isSmokeFreeRoom'] + '">无烟房：' + entry['isSmokeFreeRoom'] + '</li>');
            _html.push('<li title="床的尺寸：' + entry['roomBedWidth'] + '">床的尺寸：' + entry['roomBedWidth'] + '</li>');
            _html.push('<li title="可入住人数：' + entry['roomCustomerNumber'] + '人">可入住人数：' + entry['roomCustomerNumber'] + '人</li>');
            _html.push('<li style="padding-top:5px;">(注：本酒店房间类型多样，图片仅供参考)</li>');
            _html.push('</ul>');
            _html.push('<p  style=" clear:both;border-bottom:1px dashed #CCC;text-align:right;"><a href="javascript:FunClose(' + m + ')">收起</a></p>');
          
            _html.push(' <div style=" height:1px; clear:both;"></div>');
            $('#roomartion' + m).append(_html.join(''));//追加到你的div中
        }
    });
删除当然要根据你的li标签来删除。

Answer 14

li嵌套li感觉就很别扭，不知道你是不是想分级，你可用<OL><LI></LI>..</OL>

Answer 15

不好意思，应该用<UL><LI>xxxxx<LI>xxxxxxx</UL>