Search code examples
jquery-mobileappendchildremovechild

can not append a childNode to a div after removing existing childNodes

my problem is that I can not append a new hyperlink into a div after removing existing ones.

Here I check if there is any hyperlink inside the div and if there is, I remove all of them.

var node = document.getElementById('nearByCitiesDiv');
        while (node.hasChildNodes()) {

            node.removeChild(node.lastChild);
        }

Then I create new hyperlinks but they dont show up inside the div. By the way I am using jquery mobile panels. Also below code works fine and add new hyperlinks inside the div if I dont remove the childNodes of the div.

var element = $('<a data-role="button" style="text-decoration:none;"  href="#/" onclick="showNearCityWeather(' + nearbyPosition.lat + ',' + nearbyPosition.lng + ')" data-theme="a">' + c.toponymName + '</a >');
 $("#nearByCitiesDiv").controlgroup("container")["append"](element);
$("#nearByCitiesDiv").controlgroup("refresh");
$('[data-role="button"]').button();
Solution

  • The controlgroup container is actually a child div. So when you are removing the child nodes, you are actually removing the container. You could clear the container like this instead:

    $("#nearByCitiesDiv").controlgroup("container").empty()