Question

I have a div in a HTML file

"<div id="abc" hidden="hidden">
        <div id="statIndicator">
            <span id="imgInd" class="status-indicator-border">
                <img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
            </span><span id="messageIndicator">Updating Plots...</span>
        </div>
    </div>"

I insert the statIndicator div in another div using append.
so that div becomes

<div id="parentDiv">
 <div id="statIndicator">
                <span id="imgInd" class="status-indicator-border">
                    <img src="../../LibSrc/SharedResources/IMG/loading-trace.gif" />
                </span><span id="messageIndicator">Updating Plots...</span>
            </div>
</div>

On refresh I write $(‘#parentDiv’).empty() it deletes whatever is inside the ‘parentDiv’.
But when I try to append statIndicator using $(‘#statIndicator’), it return “[]”, though I have the ‘statIndicator’ div in Html.

Is there a way in which I can get the ‘statIndicator’ div?

Answer 1

I think jquery.append() moves the selected elements without making a copy. So you can explicitly create a copy using the .clone() method and append it’s result. Something like:

$('#abc #statIndicator').clone().appendTo('#parentDiv');

This is creating a copy and then appending it at the new location.

Once you do this there will be two divs with the same id, so it will be a good idea to always reference the statIndicator’s parent container in your selectors.