Amit Shah Amit Shah - 3 months ago 9
HTML Question

How to get innerHTML of a div.id using jQuery, which is updated dynamically



var obj = {
"Ethernet": "Up",
"Ethernet": "Down",
"USB_Dongle": "Down",
"USB_Dongle": "Down",
"X_BROADCOM_COM_PPTPAC": "Down",
"wanLink": "Up"
}

function renderStatusWanLink(obj) {
var tmp = jQuery('#WAN_Line').html();
console.log(tmp);

if (obj !== false) {
jQuery('#WAN_Line').html(obj.wanLink);
}
}

renderStatusWanLink(obj);
renderStatusWanLink(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="az-table az-table-status table table-condensed table-hover table-striped">
<tbody>
<tr>
<td>WAN Status</td>
<td>:</td>
<td id="WAN_Line" width="49%"></td>
</tr>
</tbody>
</table>





I am trying to get the html/text content first from inside the div #WAN_Line. initially it will be empty. but then next time it should return me some value as it been updated. but it always returns empty.

HTML: (this is inside one table)

<tr>
<td>WAN Status</td>
<td>:</td>
<td id="WAN_Line" width="49%"></td>
</tr>


Javascript:

function renderStatusWanLink(obj)
{
var tmp = jQuery('#WAN_Line').html();
console.log(tmp);

if (obj !== false) {

jQuery('#WAN_Line').html(obj.wanLink);
}
}


obj =

{"Ethernet":"Up",
"Ethernet":"Down",
"USB_Dongle":"Down",
"USB_Dongle":"Down",
"X_BROADCOM_COM_PPTPAC":"Down",
"wanLink":"Up"}

Answer

If all thing goes right it should work.with your given object and code , below code work perfectly for me. In below code spinet click button to change td html

<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>


<script type="text/javascript">

var obj={"Ethernet":"Up",
        "Ethernet":"Down",
        "USB_Dongle":"Down",
        "USB_Dongle":"Down",
        "X_BROADCOM_COM_PPTPAC":"Down",
        "wanLink":"Up"};
    function removeLine() {

        var tmp = jQuery('#WAN_Line').html();
        console.log(tmp);

        $('#WAN_Line').html("updated code");
    }


    function renderStatusWanLink()
    {
        var tmp = jQuery('#WAN_Line').html();
        console.log(tmp);

        if (obj !== false) {

            jQuery('#WAN_Line').html(obj.wanLink);            
        }
    }
</script>



</head>
<body>
    <div >

        <table>

            <tr>
                <td>WAN Status</td>

                <td id="WAN_Line" width="49%"></td>
            </tr>
        </table>
    </div>
    <button onclick="renderStatusWanLink()">click to change text</button>

</body>
</html>