javascript - Resizing function appends elements multiple times -

i have bit of code needs detect scrollbars on resize , load. straightforward enough, issue arises when run append() function, appends elements on , on again.

below jquery using (the demo here)

$.fn.hasscrollbar = function() {     return this.get(0).scrollwidth > this.width(); }  $(window).on("resize", function () {     var tablewidth =  $("table").width();     var wrapper = "<div class='top-scroll'><div class='inner'></div></div>";     var instruction = "<span class='instructions'>scroll left see more information</span>";      // sets overflow message , placeholder width match table     if( $('.no-overflow').hasscrollbar()){         $('.no-overflow').before(wrapper);         $('.top-scroll').before(instruction);         $('.top-scroll').children().attr("style", "width:" + tablewidth + "px;");     }      // synchronises scrollbars     $(".top-scroll").scroll(function(){         $(".no-overflow")             .scrollleft($(".top-scroll").scrollleft());     });     $(".no-overflow").scroll(function(){         $(".top-scroll")             .scrollleft($(".no-overflow").scrollleft());     }); }).resize(); 

i'd append happen once , remove when there no scrollbars present.

to check scrollbars:

if ($(document).height() > $(window).height()) {     //there vertical scrollbar } else {     //there no vertical scrollbar } 

to create 1 .top-scroll:

if( $('.no-overflow').hasscrollbar() && $('.top-scroll').length < 1) { // check .top-scroll doesn't exists     $('.no-overflow').before(wrapper);     $('.top-scroll').before(instruction);     $('.top-scroll').children().attr("style", "width:" + tablewidth + "px;"); } 

i put 3 variable declarations within if statement set if statement true. unless of course using them elsewhere.