javascript - 使用特定标签或具有特定 id/类的 div 动态创建链接

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

下面给出一些方法。
第一个：

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

第二：

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

第三：

.before()

第四：

.after()

Answer 4

您可以使用以下代码段

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

jsFiddle

Answer 5

您可以使用prepend()

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

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