javascriptinnerhtmlinsertadjacenthtml

Declaring an empty element before insertAdjacentHTML


Hi I have a simple question, do I need to specify lblWelcomeUserMessage.innerHTML = ""; ( see below in code ) in the following function before insertAdjacentHTML on it ? It actually works as it is without declaring it, but I want to know what is the optimal approach ?

// Dynamic HTML / user interface for ALL users
  function showWelcomeMessage() {

      //lblWelcomeUserMessage.innerHTML = "";

      var sWelcomeUserMessage = '<h3>' + 'Welcome:' + '  ' + sessionStorage.getItem( 'name' ) + 
      '  ' +  sessionStorage.getItem( 'lastname' ) + '  ' + sessionStorage.getItem( 'role' ) + ' </h3>';
      var iUserImage = '<img src=" ' + sessionStorage.getItem( 'image' ) + ' " width="50px">';
      lblWelcomeUserMessage.insertAdjacentHTML( 'beforeend', sWelcomeUserMessage + iUserImage );
  }

Solution

  • It depends on what you want to do.

    If you are calling showWelcomeMessage function more than once then you need to set it to empty lblWelcomeUserMessage.innerHTML = ""

           function showWelcomeMessage() {
    
      lblWelcomeUserMessage.innerHTML = "";
    
       var sWelcomeUserMessage = '<h3>' + 'Welcome:' + '  ' + sessionStorage.getItem( 'name' ) + 
      '  ' +  sessionStorage.getItem( 'lastname' ) + '  ' + sessionStorage.getItem( 'role' ) + ' </h3>';
      var iUserImage = '<img src=" ' + sessionStorage.getItem( 'image' ) + ' " width="50px">';
      lblWelcomeUserMessage.insertAdjacentHTML( 'beforeend', sWelcomeUserMessage + iUserImage );
      }
    
       setInterval(showWelcomeMessage,4000);
    

    OR

    Otherwise you can remove lblWelcomeUserMessage.innerHTML = ""; from above code