javascript - 使用 .before 方法在 div 中插入 html 图标

Question

在这种情况下， 我有一些像这样的 div:

  <div class="topImg">
   <div class="topImgIcon">
    <img src="img/bbbbb.png" class="topImgIcon"><span class="tittle">Chat Window</span>
   </div>
  </div>

我想在这个 div 中插入带有一个图标的 img 链接。是一个 X 来关闭窗口，但显示一些 html 代码，如 form .

查看我的 jQuery 代码:

var myDivImg = $( "<div class="topImg"></div>" )
$(document).ready(function() { 
  $("#maisinfo").before(myDivImg, '<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');

  $("#maisinfo").hide(); 

  $("#show").bind("click",function(){
    $("#maisinfo").slideToggle("slow");
      return false;
    });
});

我想插入html: <a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a> .before()内在我的 HTML 中的 div topImg 内。我尝试在 .before() 内创建 div但是，jQuery 创建其他相同的 div。

有人可以帮助我并做出一些解释，让我明白我做错了什么吗？

Answer 1

如果您想在 DIV 内添加某些内容，可以使用 .prepend() 或 .append()，具体取决于您希望将其添加在开头还是结尾。 .before() 将其放在 DIV 之外，就在它之前。

$("#topDiv").prepend('<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');