在包含 html 标签的字符串的子字符串中应用不同的样式

我希望在变量USER_INPUT中捕获用户的文本输入，并将该变量的值用作显示在某个显示div中的多样式字符串的子字符串.但包含html标记的文本输入(如<div>)存在问题，如下面的示例所示，其中USER_INPUT的值根本不会出现在Display中，这是可以理解的，因为.innerText和.innerHTML属性的性质不同.

var USER_INPUT = "<div>";
      
document.getElementById("DISPLAY").innerHTML =  
       "<span style='color:red'>" + "User Input : " + "</span>" + 
       "<span style='color:blue'>" + USER_INPUT + "</span>";

因此，经过多次试验，出现了一个似乎在所有情况下都很有效的解决方案:

var USER_INPUT = "<div>";
    
var XDIV = document.createElement("div");
XDIV.innerText = USER_INPUT;
var A = XDIV.innerHTML;
    
document.getElementById("DISPLAY").innerHTML =  
       "<span style='color:red'>" + "User Input : " + "</span>" + 
       "<span style='color:blue'>" + A + "</span>";

The above code shows in the DISPLAY: which is exactly what I need, that is, to be able to style the user-input independently of the first part of the string.

我的问题是我不能理解为什么上面的代码解决了这个问题.如果用户输入的字符串作为innerText传递到新的div中，并作为innerHTML检索，那么它就会奇迹般地正确地出现在显示中.我想了解这一行为背后的原因，因此任何帮助都将不胜感激. fiddle here个