javascript 我可以在数组中推送html元素吗？

kxkpmulp 于 2023-05-21 发布在 Java

关注(0)|答案(2)|浏览(189)

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

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风格，但它实际上读取一切作为字符串，所以我的结果成为如下所示的图像：

我应该用另一种方式吗？

JavaScript

来源：https://stackoverflow.com/questions/38493832/can-i-push-html-element-in-an-array

2条答案

按热度按时间

kgsdhlau1#

你必须先呈现元素并设置它的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);

 }

赞(0）回复(0）举报 2023-05-21

bxpogfeg2#

您将数据作为字符串传入，因此输出的字符串相同。如果你使用的是jquery（正如你的标签所建议的那样），创建HTML的一个简单方法是使用$（'stringOfHTML'）。

赞(0）回复(0）举报 2023-05-21