Question

在这种情况下，我有一些像：

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

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

Answer 1

如果您想在DIV中添加内容，请使用let query或.prepend()，具体取决于您是在开头还是结尾。 .append()将它放在DIV之外，就在它之前。

.before()

Answer 2

您可以使用“.html（'xxx'）”或.append / prepend（'xxx'）插入div。

$(document).ready(function() {  

  var myDivImg = $( "<div class="topImg"></div>" );
  // or var myDivImg=$('.topImg'); // => if the element exists
  var myInsertDiv='<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>';

  // first method
  myDivImg.html( myInsertDiv ); // replace all html in this div with the content from "myInsertDiv"

  //second method
  myDivImg.append( myInsertDiv );// add the html from "myInsertDiv" as last child in your "myDivImg"
  //or
  myDivImg.append( myInsertDiv );// add the html from "myInsertDiv" as first child in your "myDivImg"

});

编辑：关闭你的div使用这样的东西

$('body').on('click','.imgclose',function(){
 $('.topImg').slideUp('slow');//close your parent-main div
 return false;
});

Answer 3

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

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

  $("#show").bind("click",function(){
    $("#maisinfo").slideToggle("slow");
      return false;
    });
});
 </script>
  <div class="topImg">
   <div class="topImgIcon">
    <img src="img/bbbbb.png" class="topImgIcon"><span class="tittle">Chat Window</span>
   </div>
  </div>

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

3 个答案: