javascript - 我可以将 html 元素推送到数组中吗？

Question

例如我有一些数据需要被插入一个变量

var WhiteLists = profile.whiteList;
            for(var i=0;i<WhiteLists.length;i++){
              WhiteListRender.push('<div style="margin-bottom:20px;" class="temporayWhiteSingle"><span class="white-url-item" style="margin-bottom:10px;width: 600px;padding:5px;border-radius: 3px;background-color: #ffffff;border: solid 1px #cbcbcb;" ><span class="" >'+WhiteLists[i]+
              '</span><span class="mobileCreatebtn  sa-btn  BackBtn2" style="padding: 5px;border-radius: 5px;border: solid 1px steelblue;position: relative;left: 75px;"><a class="white-url-delete">&nbsp;Remove</a></span></div>');

        }

如您所见，我也尝试推送 html 标签和内联 css，我认为它会返回一些具有 html 和 css 样式的数据，但它实际上将所有内容都读取为字符串，所以我的结果如下图所示:

我应该换一种方式吗？

Answer 1

您必须先渲染元素并将其设置为 innerHTML。

var WhiteLists = profile.whiteList;
for(var i=0;i<WhiteLists.length;i++){

  var div = document.createElement('DIV'); 
  div.style.margin-bottom = "20px"; 
  div.className = "temporayWhiteSingle"; 

  div.innerHTML = '<span class="white-url-item" style="margin-bottom:10px;width: 600px;padding:5px;border-radius: 3px;background-color: #ffffff;border: solid 1px #cbcbcb;" ><span class="" >'+WhiteLists[i]+
                  '</span><span class="mobileCreatebtn  sa-btn  BackBtn2" style="padding: 5px;border-radius: 5px;border: solid 1px steelblue;position: relative;left: 75px;"><a class="white-url-delete">&nbsp;Remove</a></span>'; 

    WhiteListRender.push(div);

 }