How to refer to a document.createElement in CSS

Question

I'm selecting data from an API which i then make into Objects with document.createElement but how can i style them?

Here's my Js code:

  fetch('https://randomuser.me/api/?results=5&nat=us').then(response =>{
        return response.json();
    }).then(responseJson=>{
        responseJson.results
        console.log(responseJson);

        for(const user of responseJson.results){
            const img = document.createElement ("IMG");
            img.innertext = user.picture.medium;
            img.setAttribute("src", user.picture.medium)
            img.setAttribute("width", "50");
            img.setAttribute("height", "50");
            img.setAttribute("alt", "");
            document.body.appendChild(img)

            const name = document.createElement("SPAN");
            name.innerText = user.name.first;
            document.body.appendChild(name);

            const phone = document.createElement("SPAN");
            phone.innerText = user.phone;
            document.body.appendChild(phone);

            console.log(user);
        }
    })

I've tried to refer to the name.innerText But that didn't work either. However i can refer to them all by calling, Example:

span {
 color: blue;
}

And when i inspect the code it shows that the span it creates has no id what so ever, May that be the problem?

@connexo I've tried it but it's making it worse. I have 5 users and when i create a .className it only creates 1 user with the image only and leaves everything out. — Derman
– Derman, Commented Sep 18, 2018 at 7:11

Justinas · Accepted Answer · 2018-09-18 07:09:09Z

3

To style these elements there is two ways:

Add inline CSS to elements itself.

phone.style.color = 'blue';
Add some ID or class to element and then refer to them

phone.className += "my-element";

.my-element {color: blue;}

answered Sep 18, 2018 at 7:09

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

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

1 Comment

connexo Over a year ago

phone.className += "my-element" should better be phone.className += " my-element", or even better phone.classList.add("my-element").

Thijs · Accepted Answer · 2018-09-18 07:12:18Z

1

Use the className.add on the created element to assign a CSS class to it. I've modified your code to make all the names bold and the phone number blue and underlined.

fetch('https://randomuser.me/api/?results=5&nat=us').then(response =>{
    return response.json();
}).then(responseJson=>{
    responseJson.results
    console.log(responseJson);

    for(const user of responseJson.results){
        const img = document.createElement ("IMG");
        img.innertext = user.picture.medium;
        img.setAttribute("src", user.picture.medium)
        img.setAttribute("width", "50");
        img.setAttribute("height", "50");
        img.setAttribute("alt", "");
        document.body.appendChild(img)

        const name = document.createElement("SPAN");
        // Assign a CSS class name to the element.
        name.classList.add('user-name');
        name.innerText = user.name.first;
        document.body.appendChild(name);

        const phone = document.createElement("SPAN");
        phone.classList.add('phone-number');
        phone.innerText = user.phone;
        document.body.appendChild(phone);

        console.log(user);
    }
});

.user-name {
  font-weight: bold;
}

.phone-number {
  color: blue;
  text-decoration: underline;
}

answered Sep 18, 2018 at 7:12

Thijs

2,3612 gold badges14 silver badges22 bronze badges

1 Comment

Kaiido Over a year ago

Note that the img part could be simplified to const img = new Image(50, 50); img.src = user.picture.medium;.

connexo · Accepted Answer · 2018-09-18 07:18:31Z

0

Just add a className and create that CSS class in your CSS code:

// Javascript
let blue = document.createElement('p');
let orange = document.createElement('p');

blue.textContent = "blue text";
orange.textContent = "orange text";

blue.className = "blue";
orange.className = "orange";

app.appendChild(blue);
app.appendChild(orange);

/* CSS */
.blue { color: blue; }
.orange { color: orange; }

<!-- HTML -->
<div id="app"></div>

edited Sep 18, 2018 at 7:18

answered Sep 18, 2018 at 7:09

connexo

57.2k15 gold badges112 silver badges149 bronze badges

6 Comments

Derman Over a year ago

I've tried it but it's making it worse. I have 5 users and when i create a .className it only creates 1 user with the image only and leaves everything out.

connexo Over a year ago

Show your attempt then.

Derman Over a year ago

Could you give me a moment please? I'm trying @Thijs's answer.

Derman Over a year ago

Connexo i've tried stijn's answer and it is working. Your method would've worked aswell but apparently i had put the .className on the end of the span like: const name = document.createElement("SPAN").className = "name";

connexo Over a year ago

Yeah, you might be used to chaining tasks from jQuery, unfortunately in many cases this doesn't work with the native API in the same way. I tried to give a more generic answer independent of your current code problem, which is reduce to the core of what you are asking.

|

Collectives™ on Stack Overflow

How to refer to a document.createElement in CSS

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related