Question

我的代码如下：

<div id="ID1">
    <div id="ID2">
        <!-- blah blah -->
    </div>
    <div id="ID3">
        <!-- blah blah -->
    </div>
</div>

我想在第一个DIV下动态生成带有Javascript或jQuery的代码生成的代码应如下所示。

<div id="ID1">
    <a href="#" style="float: left;"><img src="imageLink" /></a>
    <div id="ID2">
        <!-- blah blah -->
    </div>
    <div id="ID3">
        <!-- blah blah -->
    </div>
</div>

我是javascript和jquery的新手所以请帮助我。

Answer 1

使用方法prepend()，您可以在选择器内的所有子项之前添加代码试试这个：

$('#ID1').prepend('<a href="#" style="float: left;"><img src="imageLink" /></a>');

如果要在加载页面时添加代码，则必须在document.ready内插入代码，如下所示：

<script>
$(document).ready(function(){
   $('#ID1').prepend('<a href="#" style="float: left;"><img src="imageLink" /></a>');
});
</script>

Answer 2

$('#ID1').prepend($('<a/>',{
    href : '#',
    css: {
      float: 'left'
    },
}).prepend($('<img/>',{
    attr:{
        src:'imageLink'
    }
})));

Answer 3

您可以使用prepend()

$("#ID1").prepend('<a href="#" style="float: left;"><img src="imageLink" /></a>');

http://api.jquery.com/prepend/

Answer 4

您可以使用以下代码段

$(function() {
  $("<a href='#' style='float:left;'>a will be added here<img src='imageLink'></a>").prependTo("#ID1");
});

jsFiddle

Answer 5

下面给出了一些方法第一：

$("ID2").prepend('<p>content here</p>');

第二

$('<p>content here</p>').prependTo("#ID2");

第三

.before()

和第4名：

.after()

使用特定标记或具有特定ID /类的div动态创建链接

5 个答案: