Question

您好我有一个简单的问题，我是否需要在其中的lblWelcomeUserMessage.innerHTML = ""; ( see below in code )函数中指定before insertAdjacentHTML？它实际上是在没有声明它的情况下工作，但我想知道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 );
  }

Answer 1

insertAdjacentHTML inserts some HTML around a node（lblWelcomeUserMessage，您之前应该使用lblWelcomeUserMessage = document.getElementById('welcome_tag')）之类的内容。

将内部内容设置为空字符串并不是必需的，除非您要清除它。这是一个设计问题，而不是程序问题。

Answer 2

这取决于你想做什么。

如果您多次调用showWelcomeMessage函数，那么您需要将其设置为空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

否则您可以从中移除lblWelcomeUserMessage.innerHTML = ""; 上面的代码

Answer 3

什么是最佳方法？

顺便提一下，基于MDN：

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

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

所以它基本上取决于你的需求。如果您想要替换以前的消息，只需添加lblWelcomeUserMessage.innerHTML = "";，如果您想要显示之前的所有消息，只需注释该代码。

在insertAdjacentHTML之前声明一个空元素

3 个答案: