How do I style elements created in Javascript?

Code Feedback
1

Here is the codepen link: http://codepen.io/roman_fedoruk/pen/ZBGKJb?editors=1111

Basically, if you run it, all 8 of the streamers names are put on the screen, each of these are in their own <p> element. So the problem is how do I style the data? I can just use the “p” in css but that won’t work very well when I start adding more data on their. Could I just put all of it in one div?

3

@P1xt thanks! is there any way to have all of them in one div element so that I can make a nice looking box?

5

ok, that really helped, thanks!

7

@P1xt Will definitely take a look at it, I don’t want to bother you but I am having another issue, I am trying to make the text clickable, and I cant seem to set the link or target to “_blank”.

Here is the code:
`var streamerName = data._links.self;
var streamerLinkData = data._links.self;

  streamerName = streamerName.split(("/")).pop() // Grabs the name of all the streamers.
  var myDiv = document.getElementById("my-streamers");
  var streamerData = document.createElement("P");
  var streamerLink = document.createElement("A")
   var name = document.createTextNode(streamerName);
   streamerData.appendChild(name);
   streamerLink.appendChild(streamerData);


   _streamerLink.href = streamerLinkData;__
   streamerLink.target.setAttribute("target", "_blank");


   document.body.appendChild(streamerLink);
   myDiv.appendChild(streamerData);
   streamerData.setAttribute("class","my-paragraphs");`

It’s the two lines that are separated by blank space. When I comment them out the code runs fine, but when they aren’t none of the names show up.

9

@P1xt Just tried that, names don’t show up, but when I comment it up the names show up.

Here is the code:
streamerLink.setAttribute(streamerLinkData, "_blank");

Edit:
Got it to work with this:
treamerLinkData = streamerLinkData.toString(); streamerLink.setAttribute("href", streamerLinkData); streamerLink.setAttribute("target", "_blank");

11

Yep, that fixed it, thanks for all the help!