css does not work with div added with append

Question

I have a list and in it I add the elements with jquery append , and the list elements do not capture the css of my style file, just ignore it. Because?

html:

<ul id="list_arquivos"></ul>

css:

#list_arquivos{
    list-style:none;
}

#list_arquivos li{
    display:inline;
    background-color: #0C94C7;
}

Javascript:

$("#list_arquivos").append(
        '<li>' +
                '<div style="border: 1px solid #FAFAFA">' +
                        '<img src="img/file_icons/'+dados.icon+'">' +
                 '</div>' +
                 '<p>'+dados.nome_arquivo+'</p>' +
        '</li>'
 );

Just stay like this:

Answer 1

You referenced ul 2 times #list_arquivos ul li

#list_arquivos li that’s enough...

Answer 2

So friend, coming here to answer your question, what just happened is that you used the id #list_arquivos right? Then make sure you already have the already stated cluttered list. So when you created in your CSS code.

#list_arquivos ul li{
    display:inline;
    background-color: #0C94C7;
}

Make sure you are declaring the #list_arquivos and shortly after ul. I mean, you don’t have to declare the list disorderly twice, right?

How would you look then?

Example:

#list_arquivos li{
    display:inline;
    background-color: #0C94C7;
}

That’s because you created an id inside your ul - so make sure to use or the ul or the #list-arquivos.

Well, I hope I’ve helped you. If you have any questions, you can ask again that I will do my best to answer.

Answer 3

right I get it, see a small mistake that developers comment on is to totally forget to put in your html document the script and the example link :

for css we use:

1- //here you will specify your css file so that it can connect to the file

2-// we can only do something with jquery if this script is inside the head tag of our html document, here you can copy and paste into your document if you haven’t done this..

3-//In this last example is how it will behave within your html document.

Something

• well once again hope power is helping as far as possible ...

att: Rafael Macedo

Answer 4

Brother, I’ve come to the same problem as yours and I believe I’ve found a solution, see if it makes sense to you.

In the case as the element li within the list_arquivos was created via javascript I think the style should be done in the same way, in case, soon after the append would have another line like this:

$('#lis_arquivos').append('<li>...</li>')
$('#list_arquivos li').css({
      'display': 'inline', 
      'background-color': '#0C94C7'
});

For me it worked right, I hope I have help. Any questions give a little look here https://poucaslinhas.com.br/manipulacao-de-css-com-jquery/

See you around!