JS image inside ul li

window.onload = function() {
  var li_elem = document.createElement("li");
  li_elem.setAttribute("id", "123");
  var img_elem = document.createElement("img");
  img_elem.setAttribute("src", " https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1200px-Unofficial_JavaScript_logo_2.svg.png");
  img_elem.setAttribute("height", "50");
  img_elem.setAttribute("width", "50");
  img_elem.setAttribute("alt", "Flower");
  li_elem.appendChild(img_elem);
  document.getElementById("myList").appendChild(li_elem);
}

JavaScripts

fetch('https://hplussport.com/api/products?order=price')
.then(function(doglist){
	return  doglist.json();
})
.then(function(jsonData){
	for(imtes in jsonData){	
	
		var products = document.createElement("ul");
        var product_id = jsonData[imtes ].id;		
        products.setAttribute("id", product_id); 
		
		var name = jsonData[imtes ].name;
		var products_name = document.createElement("li");
		products_name.innerHTML = name;
		 
		var price = jsonData[imtes ].price;
		var products_price = document.createElement("li");
		products_price.innerHTML = price;

        
 		var li_image = document.createElement("li");
		var img_elem = document.createElement("img");
		img_elem.setAttribute("alt", name);
		var product_img = jsonData[imtes ].image;
		img_elem.setAttribute("src",  product_img);
		li_image.appendChild(img_elem);
	     
		 
		products.appendChild(products_name);  
		products.appendChild(products_price); 
		products.appendChild(li_image);
		document.getElementById("products").appendChild(products);
		 
	}
})

HTML

<!DOCTYPE html>
<html>
<head>
	<title>H+ Sport API</title>
	<script src="script.js"></script>
	<style>
#products{
border:5px solid blue;
overflowh:hidden;
padding:20px;
}

#products ul{border:1px solid silver;
margin5px;
padding:20px 20px  20px 50px ;
}

#products ul li{ 
overflowh:hidden;
padding:5px;
}


#products ul li img{ 
width:100px;
height:100px;
}
	</style>
</head>
<body>
	<h1>Working with the H+ Sport API</h1>
	
<div id="products"></div>	
 
 
</ol>
</body>
</html>

all together

<!DOCTYPE html>
<html>
<head>
	<title>H+ Sport API</title>
	<script >
 fetch('https://hplussport.com/api/products?order=price')
.then(function(doglist){
   return  doglist.json();
})
.then(function(jsonData){
   for(imtes in jsonData){ 
    
      var products = document.createElement("ul");
        var product_id = jsonData[imtes ].id;      
        products.setAttribute("id", product_id); 
       
      var name = jsonData[imtes ].name;
      var products_name = document.createElement("li");
      products_name.innerHTML = name;
        
      var price = jsonData[imtes ].price;
      var products_price = document.createElement("li");
      products_price.innerHTML = price;
 
         
      var li_image = document.createElement("li");
      var img_elem = document.createElement("img");
      img_elem.setAttribute("alt", name);
      var product_img = jsonData[imtes ].image;
      img_elem.setAttribute("src",  product_img);
      li_image.appendChild(img_elem);
         
        
      products.appendChild(products_name);  
      products.appendChild(products_price); 
      products.appendChild(li_image);
      document.getElementById("products").appendChild(products);
        
   }
})

 	
	
	
	</script>
	<style>
#products{
border:5px solid blue;
overflowh:hidden;
padding:20px;
}

#products ul{border:1px solid silver;
margin5px;
padding:20px 20px  20px 50px ;
}

#products ul li{ 
overflowh:hidden;
padding:5px;
}


#products ul li img{ 
width:100px;
height:100px;
}
	</style>
</head>
<body>
	<h1>Working with the H+ Sport API</h1>
	
<div id="products"></div>	
 
 
</ol>
</body>
</html>

Find me on

JS image inside ul li

18 Related pages