Setting background image dynamically ul/li div element

Question

I am new in website development and trying to figure out how to set image dynamically in ul / li div element. Below is my code in html file :

<div class="results">
    <ul class="row">
        <li class="template hidden col-md-3">
            <div class="image">
                <!--img src='broken_file.png'-->
                <data>
                    <span class="name"></span>
                    <span data-before='faces' class="faces"></span>
                    <span data-before='genus' class="genus"></span>
                    <span data-before='vertices' class="vertices"></span>
                </data>
            </div>
        </li>
    </ul>
</div>

And from another js file I am trying to access the 'image' div as

$(li).find('image').css()

I am trying to set an image url inside css() , but not sure how I can do it, or even it is possible?

Answer 1

Firstly your jQuery syntax is incorrect. li should be in quotes as it's a string, and the image selector requires a preceding . as it's a class. Finally, you can set the background-image in CSS, like this:

$('li').find('.image').css('background-image', 'url("my-image.png")');

Answer 2

1) If you want to insert img tag into div with "image" class -

$('li').find('.image').append($('<img src="http://fakeimg.pl/250x100/000/">'))

2) If you want to change src attr -

    $('li').find('.image img').attr('src','http://fakeimg.pl/250x100/000/">')