Can i push a HTML element in an array? [duplicate]

Question

For example i have some data need to be push into a variable

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>');

        }

As you see i tried to push the html tag and inline css as well, i thought it's going to return some data with html and css style but it actually read everything as string so my outcome became as the image show below:

Should i do it in another way?

You are adding strings so of course it is an array of strings. If you want it to be DOM elements, you need to append DOM elements. You need to look at createElement or $() with jQuery — epascarello
– epascarello, Commented Jul 21, 2016 at 2:25
Needs to be in the DOM to be able to see any styling, what is the overall objective for this array? — charlietfl
– charlietfl, Commented Jul 21, 2016 at 2:37
The thing missing from the question is how you are using the elements of WhiteListRender. As others say, if you use node.innerHTML = ... or $(node).html(...), or even $(node).append(...), it should work. On the other hand, if you are using using JSX, then you need to remove the quotes. — Amadan
– Amadan, Commented Sep 18, 2024 at 3:13

Yasin Yaqoobi · Accepted Answer · 2016-07-21 02:30:06Z

0

You have to render the element first and set it's 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);

 }

answered Jul 21, 2016 at 2:30

Yasin Yaqoobi

2,0683 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aeb0 · Accepted Answer · 2016-07-21 02:30:53Z

0

You are passing the data in as a string, so it comes out as the same string. If you are using jquery (as your tag suggests) an easy way of creating HTML is with $('stringOfHTML').

edited Jul 21, 2016 at 2:30

answered Jul 21, 2016 at 2:25

aeb0

8269 silver badges12 bronze badges

Collectives™ on Stack Overflow

Can i push a HTML element in an array? [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related