Stop from destroying the element

Question

So I have this code:

initialize: function() {
    setInterval(function() {
        min = parseInt($('#js-clock').text()) - 1;
        $('#js-clock').text(min + 'm');
        if (min == 0){
            // Do Something
        }
    }, 1000);

}

Which goes through and replaces the following div:

<div class="col-xs-8 text-large js-beacon-clock" id="js-clock">
    <i class="fa fa-clock-o"></i>30m
</div>

with

<div class="col-xs-8 text-large js-beacon-clock" id="js-clock">
    29m
</div>

I don't want to have to append the <i> tag in the JavaScript, that should remain separate. So how do I change the minutes with out losing everything in the inner div just to change 30 to 29?

Wrap the text in a span. Or read [this](http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery). — Blazemonger, Jan 27 '14 at 19:16

score 3 · Answer 1 · answered Jan 27 '14 at 19:17

3

You'll need to encase the minutes in some other element:

<div class="col-xs-8 text-large js-beacon-clock" id="js-clock">
    <i class="fa fa-clock-o"></i><span>30m</span>
</div>

Then in JavaScript:

$('#js-clock span').text(min + 'm');

answered Jan 27 '14 at 19:17

Greg Burghardt

17,900
9
49
92

score 0 · Answer 2 · answered Jan 27 '14 at 20:29

I added a span tag:

<div class="col-xs-8 text-large js-beacon-clock" id="js-clock">
    <i class="fa fa-clock-o"></i><span>30m</span>
</div>

Then I changed the jquery too:

initialize: function() {
    setInterval(function() {
        min = parseInt($('#js-clock span').text()) - 1;
        $('#js-clock span').text(min + 'm');
        if (min == 0){
            alert('OMG');
        }
    }, 1000);

}

and all is well again

Stop from destroying the element

2 Answers2