将模板添加到 img 中 div

Question

我需要将模板动态地放在位于 div 中的静态 img 之上。在我运行 function template(){} 两次之后更准确地说，我希望我的 HTML 代码像这样：

   <div class="main">
           <div id="templateID"></div>
           <div id="templateID"></div>
           <img src="~/Content/img/preload.gif" id="gifLoad"/>
    </div>

在运行之前，我的 HTML 看起来像这样：

  <div class="main">
    <img src="~/Content/img/preload.gif" id="gifLoad"/>
</div>

在运行ning function template(){} 两次之后，我的 HTML 看起来像这样：

<div class="main">
  <img src="~/Content/img/preload.gif" id="gifLoad"/> 
  <div id="templateID"></div>
  <div id="templateID"></div>
</div>

假设在 img 之上添加模板的函数如下所示。

function template(data) {
        var parent = $('.main');

        var template = '<div id="templateID"></div>';

        var parent2 = $('#gifLoad');
        $('template').prependTo(parent2);

        parent.append(template);

    })

}

你能帮帮我吗？

Answer 1

问题是：

.append() 将数据附加到元素的末尾。
.prepend() 将数据添加到元素的开头。

使用.prepend()代替.append()：

parent.prepend(template);

而且，复制 id 也不是一个好主意，因为它们本来就是独一无二的。最好在添加数据之前更改 ElementID。

Answer 2

您可以使用.append

var parent = $('.main');
var template = '<div class="templateID"></div>';
parent.prepend(template.clone());
parent.prepend(template);

或使用.before()

var template = '<div class="templateID"></div>';
$("#gifLoad").before(template);
$("#gifLoad").before(template.clone());

*不应使用重复的 ID。使用 class 代替它。

Answer 3

使用$.prepend instead of $.append，也id必须是唯一的（<div id="templateID"></div>），改它到 class

function template(data) {
    var parent = $('.main');
    var template = '<div class="templateID"></div>';
    
    parent.prepend(template);
}

template();
template();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <img src="~/Content/img/preload.gif" id="gifLoad"/>
</div>

将模板添加到 img 中 div

Prepending template to img inside div

html

javascript

jquery

append