Javascript 在insertAdjacentHTML之前声明空元素

嗨，我有一个简单的问题，我是否需要指定

lblWelcomeUserMessage.innerHTML=“”；（请参见下面的代码）

在插入附件TML之前，在以下功能中

？它实际上是按原样工作的，没有声明，但我想知道什么是
最佳方法

// 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 );
  }

//所有用户的动态HTML/用户界面
函数showWelcomeMessage（）{
//lblWelcomeUserMessage.innerHTML=“”；
var sWelcomeUserMessage=''+'欢迎：'+''+会话存储.getItem（'name'）+
''+sessionStorage.getItem（'lastname'）+''+sessionStorage.getItem（'role'）+''；
变量iUserImage=''；
lblWelcomeUserMessage.insertAdjacentHTML（'beforeend'，sWelcomeUserMessage+iUserImage）；
}
insertAdjacentHTML
（
lblWelcomeUserMessage
，您应该在之前使用类似于
lblWelcomeUserMessage=document.getElementById（'welcome_标记'）的内容获得它。
）

将其内部内容设置为空字符串并不是真正必要的，除非您想清除它。这与其说是一个编程问题，不如说是一个设计问题。
insertAdjacentHTML
（
lblWelcomeUserMessage
，您应该在使用类似于
lblWelcomeUserMessage=document.getElementById（'welcome_标记'）之类的东西之前就已经知道了。
）

将其内部内容设置为空字符串并不是真正必要的，除非您想清除它。这是一个设计问题，而不是程序问题。
什么是最佳方法？

顺便说一下，基于MDN：


insertAdjacentHTML（）将指定的文本解析为HTML或XML，然后
将生成的节点插入DOM树中的指定位置。
它不会重新分析正在使用它的元素，因此它会这样做
不会损坏该元素内的现有元素。这避免了
额外的序列化步骤，使其比直接
innerHTML操作

所以这基本上取决于你的需要。如果要替换上一条消息，只需添加
lblWelcomeUserMessage.innerHTML=“”，如果您想显示之前的所有消息，只需对代码进行注释。
什么是最佳方法？

顺便说一下，基于MDN：


insertAdjacentHTML（）将指定的文本解析为HTML或XML，然后
将生成的节点插入DOM树中的指定位置。
它不会重新分析正在使用它的元素，因此它会这样做
不会损坏该元素内的现有元素。这避免了
额外的序列化步骤，使其比直接
innerHTML操作

所以这基本上取决于你的需要。如果要替换上一条消息，只需添加
lblWelcomeUserMessage.innerHTML=“”，如果您想显示之前的所有消息，只需注释该代码。
这取决于您想做什么

如果您多次调用
showWelcomeMessage
函数，则
您需要将其设置为空
lblWelcomeUserMessage.innerHTML=“”

函数showWelcomeMessage（）{
lblWelcomeUserMessage.innerHTML=“”；
var sWelcomeUserMessage=''+'欢迎：'+''+会话存储.getItem（'name'）+
''+sessionStorage.getItem（'lastname'）+''+sessionStorage.getItem（'role'）+''；
变量iUserImage=''；
lblWelcomeUserMessage.insertAdjacentHTML（'beforeend'，sWelcomeUserMessage+iUserImage）；
}
设置间隔（showWelcomeMessage，4000）；

或

否则，您可以删除
lblWelcomeUserMessage.innerHTML=“”来自
上述代码

这取决于你想做什么

如果您多次调用
showWelcomeMessage
函数，则
您需要将其设置为空
lblWelcomeUserMessage.innerHTML=“”

函数showWelcomeMessage（）{
lblWelcomeUserMessage.innerHTML=“”；
var sWelcomeUserMessage=''+'欢迎：'+''+会话存储.getItem（'name'）+
''+sessionStorage.getItem（'lastname'）+''+sessionStorage.getItem（'role'）+''；
变量iUserImage=''；
lblWelcomeUserMessage.insertAdjacentHTML（'beforeend'，sWelcomeUserMessage+iUserImage）；
}
设置间隔（showWelcomeMessage，4000）；

或

否则，您可以删除
lblWelcomeUserMessage.innerHTML=“”来自
上述代码

“最佳方法”取决于您想要强调的内容、性能、安全性、更少的代码。。。从安全角度看，方法是创建H3元素和图像，然后使用
textContent
填充标题，并通过以下方式设置图像的属性。。。好。。。属性或属性。最后，将这些元素附加到所需的元素。这可能也是最有效的方法。代码更少的方法将只使用一个
innerHTML
，它将覆盖以前的内容，而不会事先清空它。这真是一个很好的解释。谢谢。一个“最佳方法”取决于你想要强调的，性能，安全性，更少的代码。。。从安全角度看，方法是创建H3元素和图像，然后使用
textContent
填充标题，并通过以下方式设置图像的属性。。。好。。。属性或属性。最后，将这些元素附加到所需的元素。这可能也是最有效的方法。代码更少的方法将只使用一个
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);