我可以在数组中推送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

您将数据作为字符串传递，因此它以相同的字符串形式出现。如果您正在使用jquery（正如您的标记所示），使用$（＆＃39; stringOfHTML＆＃39;）创建HTML的简单方法。

Answer 2

您必须先渲染元素并将其设置为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);

 }