Question

这是我的HTML代码：

<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>

我想使用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>

如何使用jquery ...请帮助我......

Answer 1

使用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);

Answer 2

请参阅以下代码段。 新图像源将是从选择图像选项

中选择的图像源

＆＃13;

function imagechange(){
  var image = document.createElement('img');
  image.src = $(".input-file").val();
  $(image).appendTo(".admin__field-control");
}

＆＃13;

<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>

＆＃13;

Answer 3

使用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);

});

如何使用jquery将html代码添加到div中

3 个答案: