Home/ Questions/Q 6850327
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:06:38+00:00

I am using the following code to append some ul and li elements directly

  • 0

I am using the following code to append some ul and li elements directly into the DOM. I am using a fragment and appending the child nodes to the fragment and at last appending the fragment to the node.

function updateTree(objArray,leafClass){

    var currentElement = document.getElementById(currentNodeId);
    currentElement.setAttribute("class",'jstree-open jstree-unchecked');
    var fragment = document.createDocumentFragment();
    var ulElement = document.createElement('ul');
    var i = objArray.length;
    //LoopStart
    for (var i = 0, j = objArray.length ; i < j; i++ ){
    //while(i--){
    var liElement = document.createElement('li');

    liElement.setAttribute("id", objArray[i].attr.id);
    liElement.setAttribute("class",'jstree-closed jstree-unchecked '+leafClass+'');
    liElement.innerHTML = "<ins class=\"jstree-icon\">&nbsp;</ins><a href=\"#\" class=\"\"><ins class=\"jstree-checkbox\">&nbsp;</ins><ins class=\"jstree-icon\">&nbsp;</ins>" + objArray[i].data + "</a> ";

    if(currentElement.getAttribute("class").indexOf('leaf') > 0){
        ulElement.appendChild(liElement);
        fragment.appendChild(ulElement);
        //$(currentElement.childNodes[1]).removeClass('jstree-laoding');
        //console.log("update Tree inside if: " + objArray[i].data);
        return "OK";
    }

    ulElement.appendChild(liElement);
    fragment.appendChild(ulElement);
    //console.log("update Tree for : " + objArray[i].data);
    //}
    }
    //LoopEnd
    currentElement.appendChild(fragment.cloneNode(true));
    currentElement.childNodes[1].setAttribute("class","");
    //console.log("update Tree end: ");
    ////console.log("time"+timer.getDiff());
    //$(currentElement.childNodes[1]).removeClass('jstree-laoding');
    return "OK";
  }

The code is working fine in IE8 and Firefox, but in IE7, I cannot see the elements that I am appending; the page is blank.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am not sure though i guess the issue is with your 

    if(currentElement.getAttribute("class").indexOf('leaf') > 0){
        ulElement.appendChild(liElement);
        fragment.appendChild(ulElement);
        //$(currentElement.childNodes[1]).removeClass('jstree-laoding');
        //console.log("update Tree inside if: " + objArray[i].data);
        return "OK";
    }

    i tried a simple code

    <html><head><script>
function abc(){
alert(document.getElementById("a1").getAttribute("class"));
}

</script>
</head>
<body onload="abc();">

<div id="a1" class="ac"></div>
</body>

</html>

    it alerts
    ff – > ac
    ie8 -> null
    ie7 -> null

    solution : instead of using getAttribute use className

    • document.getElementById(“a1”).getAttribute(“class”) – > wrong
      implementation
    • document.getElementById(“a1”).className -> correct implementation

    and the use of the if block is quite abrupt will like to you to check it according to your use.

    • 0