1

This is my html code :

<div class="admin__field-control control">
            <input id="page_image" name="image" data-ui-id="adminhtml-grid-edit-tab-templatesetup-0-fieldset-element-file-image" value="0" title="Background Image" tabindex="1" onchange="imagechange()" class="input-file" style="" type="file"></div>

I want to do like this using jquery :

    <div class="admin__field-control control">
<img id="page_image_image" class="small-image-preview v-middle" src="pokeball.png" title="pokeball.png" alt="pokeball.png" data-ui-id="adminhtml-grid-edit-tab-templatesetup-0-fieldset-element-file-image" width="22" height="22">
  <input id="page_image" name="image" data-ui-id="adminhtml-grid-edit-tab-templatesetup-0-fieldset-element-file-image" value="0" title="Background Image" tabindex="1" class="input-file" style="" onchange="imagechange()" type="file">
</div>

How it is possible using jquery ... please help me...

Rohan Hapani
  • 139
  • 1
  • 3
  • 16
  • If you want to add something to an existing element you want to look at the append method - http://api.jquery.com/append/ – Ben Lonsdale Apr 25 '17 at 09:45

3 Answers3

1

use append

   var apnd = '<img id="page_image_image" class="small-image-preview  v-middle" src="pokeball.png" title="pokeball.png" alt="pokeball.png" data-ui- id="adminhtml-grid-edit-tab-templatesetup-0-fieldset-element-file-image"  width="22" height="22">';
   $('.admin__field-control').append(apnd);
Vikrant
  • 444
  • 1
  • 5
  • 22
0

See the below code snippet. New image source will be the one selected from choose image option

function imagechange(){
  var image = document.createElement('img');
  image.src = $(".input-file").val();
  $(image).appendTo(".admin__field-control");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="admin__field-control control">
           <input id="page_image" name="image" data-ui-id="adminhtml-grid-edit-tab-templatesetup-0-fieldset-element-file-image" value="0" title="Background Image" tabindex="1" onchange="imagechange()" class="input-file" style="" type="file"></div>
sumit chauhan
  • 1,270
  • 1
  • 13
  • 18
0

use jQuery prepend() 

$(document).ready(function () {
    var html = '<img id="page_image_image" class="small-image-preview v-middle" src="pokeball.png" title="pokeball.png" alt="pokeball.png" data-ui-id="adminhtml-grid-edit-tab-templatesetup-0-fieldset-element-file-image" width="22" height="22">';
    $(".admin__field-control").prepend(html);

});
Sanchit Gupta
  • 3,148
  • 2
  • 28
  • 36