<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="admin" /> <title>Untitled - 1</title> </head> <body> <input type='button' value='click me' onclick='click_me()'/> </body> <script> function click_me() { var div = document.createElement('div'); div.style.backgroundImage= 'url(https://www.google.ru/images/google_favicon_128.png)'; div.style.width = '128px' div.style.height = '128px' document.body.appendChild(div); }; </script> </html>
<head> <style> body div { height: 100px; width: 250px; background-color: #c1c1c1; margin: 5px; float: left; } </style> </head> <body> </body> <script> function createDivs() { var u = ['/img/1.jpg', '/img/2.jpg', '/img/3.jpg'], tmp = document.createDocumentFragment(); for (var i = 0; i<u.length; i++) { var div = document.createElement('div'); div.style.backgroundImage = 'url(' + u[i] + ')' ; div.innerHTML = 'Мой background-image = ' + u[i]; tmp.appendChild(div); } document.getElementsByTagName('body')[0].appendChild(tmp); } createDivs(); </script>
var u = ['/img/1.jpg', '/img/2.jpg', '/img/3.jpg']; for(var i in u) document.write('<div style="background-image:url(\''+u[i]+'\')"></div>');