0

您好我有一个简单的问题,我需要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 );
  }
4

3 回答 3

1

这取决于你想做什么。

如果您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);

或者

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

于 2018-02-08T08:05:30.660 回答
1

insertAdjacentHTML 在节点周围插入一些 HTML ( lblWelcomeUserMessage,您应该在之前使用类似lblWelcomeUserMessage = document.getElementById('welcome_tag')) 获得这些 HTML。

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

于 2018-02-08T08:00:18.603 回答
0

最佳方法是什么?

顺便说一下基于MDN的:

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

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

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

于 2018-02-08T08:04:57.440 回答