Bild als div mit Javascript hinzufügen

Question

Ich versuche ein Bild als Element in meine Webseite einzufügen. Ich kann das nicht tun. Es gibt Anweisungen zur Vorschau eines Bildes, aber ich konnte keine Lösung finden.

Was ich möchte, ist es, ein Div mit einem Bild in die Webseite hinzuzufügen und es mit verschiedenen Bildern zu laden. Nachdem ich Bild 1 hinzugefügt habe, würde ich Bild 2 unter Bild 1 auf derselben Webseite laden.

html Körper Code:

<input type='file' id='getval' /><br/><br/> 
<span onclick="readURL()" class="addBtn">Add</span> 
<div id="myUL"></div> 

Javascript-Code:

<script type="text/javascript"> 
    // grabs image 
    var file = document.createElement('image'); 
    file.src = document.getElementById('getval').files[0]; 
    // creates div & assigns id 
    var div = document.createElement('div'); 
    div.id = 'item'; 

    // adds file to div 
    file.type = 'image'; 
    div.appendChild(file); 

    //adds item 
    document.getElementById("myUL").appendChild(div); 
} 
</script> 

edit1 * Ich denke, die Ausgabe des Code hinzufügen ich in das HTML-Dokument wäre besser angezeigt werden soll.

Javascript erzeugt HTML-Code innerhalb Dokument:

<div style="background-image":url("image");"><div> 

Answer 1

Sie dieses Skript

count = 0; 
 
function viewImage(){ 
 
var imagefile = document.querySelector('#image'); 
 
       if (imagefile.files && imagefile.files[0]) { 
 
        var reader = new FileReader(); 
 
        reader.onload = function (e) { 
 
var content = '<img id="temp_image_'+count+'" style="border: 1px solid; width: 107px;height:107px;" >'; 
 
document.querySelector('#all_images').innerHTML += content; 
 
document.querySelector('#temp_image_'+count).setAttribute('src', e.target.result); 
 
        }; reader.readAsDataURL(imagefile.files[0]); 
 
        this.imagefile = imagefile.files[0]; 
 
        count++; 
 
       }else{ 
 
        console.log("Image not selected"); 
 
       } 
 
    }

<div id="all_images"> 
 
</div> 
 
<input id="image" name="image" type="file" onChange="viewImage()">

können

Answer 2

Hier gehen Sie, obwohl achten Sie auf den Kommentar in Zeile 3.

<script type="text/javascript"> 
var file = document.createElement("img"); 
file.setAttribute("src", document.getElementById('getval').files[0]); //You can use HTML5 File API here 
file.setAttribute("height", "250"); 
file.setAttribute("width", "250"); 
var divTocreate = document.createElement('div'); 
divTocreate.id = 'item'; 
divTocreate.appendChild(file); 
document.getElementById("myUL").appendChild(divTocreate); 
</script>