如何使用jquery将html代码添加到div中[重复]答案

【问题标题】：How to add html code into div using jquery [duplicate]如何使用jquery将html代码添加到div中[重复]
【发布时间】：2017-09-22 06:06:39
【问题描述】：

这是我的 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...请帮助我...

【问题讨论】：

如果你想向现有元素添加一些东西，你想看看 append 方法 - api.jquery.com/append

标签： javascript jquery html

【解决方案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);

【讨论】：

【解决方案2】：

参见下面的代码 sn-p。 新的图像源将是从选择图像选项中选择的一个

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>

【讨论】：

【解决方案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);

});

【讨论】：