Display a jQuery variable inside html?

Question

I am having difficulty in place my jquery variable inside my html tag. For some reason the variable is being displayed outside of my div.

I have the following code:

<script>
    $(document).ready(function() {
        setInterval(function() {
            var sec = 30
            var timer = setInterval(function() { 
                $('#hideMsg span').html(sec--);
                if (sec == -1) {
                    $('#hideMsg').fadeOut('fast');
                    clearInterval(timer);
                } 
            }, 1000);
        }, 2000);
    });
</script>
<script>
    $(document).ready(function() {
        setInterval(function() {
            var randomnumber = '<div id="hideMsg"><span>30</span></div>';
            $('#warning_show').html('<div id="message_box2"><h23>Warning!</h23><p>Your account has been Inactive for some time. You will be logged out in  ' + randomnumber + ' seconds.</p><div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div></div>');
        }, 3000);
    });
</script>

<div id="warning_show"></div>

This produces the following result:

_ _ _ _ _ _ _  _ _ _ _ _ _ _ _ _ _ _ _ _ _
|                                         |
|   Time runs out in                      |
|_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
30 
seconds  

What I want to have is:

_ _ _ _ _ _ _  _ _ _ _ _ _ _ _ _ _ _ _ _ _
|                                         |
|   Time runs out in 30 seconds           |
|_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|

Can someone please show me where I am going wrong?

Answer 1

Use span only or use div with display:inline; .

   var randomnumber = '<span id="hideMsg">30</span>';

Fiddle

Reason : div is block type of element ,and span is inline which displays the content inline.

For difference ,check

Answer 2

Since div is by default display block, it goes to next line.

Try using span instead of div:

var randomnumber = '<span id="hideMsg"><span>30</span></span>';

Or use css to change its display to inline:

#hideMsg{
    display: inline;
}

Answer 3

Use a span isntead

var randomnumber = '<span id="hideMsg"><span>30</span></span>';

And then

$('#hideMsg span').html(sec--);

Answer 4

The main issue is that the element you're appending the seconds to should be inline. However, you can massively improve the logic here to remove the unnecessary nested setInterval calls. Try this:

<div id="warning_show">
    <div id="message_box2">
        <h23>Warning!</h23>
        <p>Your account has been Inactive for some time. You will be logged out in <span class="timeout-seconds"></span> seconds.</p>
        <div class="boxclose" id="boxclose">&#10006;</div>
    </div>
</div>

var sec = 3
$('.timeout-seconds').text(sec);

$('#boxclose').click(function() {
    $('#warning_show').hide();
    clearInterval(timer);
});

var timer = setInterval(function () {
    $('.timeout-seconds').text(sec--);
    if (sec == -1) {
        $('#warning_show').fadeOut('fast');
        clearInterval(timer);
        // redirect to login screen...
    }
}, 1000);

Example fiddle

If you require, you can create the HTML structure via jQuery.