Need a random ID for a div to solve a caching issue in WordPress

I’m hoping someone can help a javascript noob with a caching problem. I’m making a site in WordPress and I’ve got a caching plugin installed. I need one div (that’s on the sidebar of every page) NOT to be cached as it contains an image and text that is randomly generated on each page load. I’ve done a lot of reading and testing out of various online solutions, but I can’t get one to work. I read that the best way to get around this is to give the div a random ID via Date.now(), but I can’t get that to work either. So I found something close, yet it, too, doesn’t work (posted below). The div doesn’t show on screen, yet its contents show up fine in my source code.

Can anyone fix it for me or suggest something? I am a complete noob when it comes to javascript. Thank you for reading! 🙂

Read More
<script type='text/javascript'>
function randomString(length) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');

    if (! length) {
        length = Math.floor(Math.random() * chars.length);
    }

    var str = '';
    for (var i = 0; i < length; i++) {
        str += chars[Math.floor(Math.random() * chars.length)];
    }
    return str;
}

var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">[autonav display="images,title, page, excerpt" pics_only="0" postid="11" attachment="1" orderby="rand" count=1]</div>'); 
</script>

Related posts