How do I style elements created in Javascript?

How do I style elements created in Javascript?


Here is the codepen link:

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?


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


ok, that really helped, thanks!


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

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


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.


@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");

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


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