suchen

Heim >Web-Frontend >js-Tutorial >jQuery implementiert das dynamische Hinzufügen und Löschen einer div_jquery

jQuery implementiert das dynamische Hinzufügen und Löschen einer div_jquery

WBOY
WBOYOriginal
2016-05-16 15:45:351418Durchsuche

Dieser Artikel gibt Ihnen hauptsächlich eine kurze Einführung in das dynamische Hinzufügen und Löschen eines Div in einem Element, in der Hoffnung, den Effekt zu erzielen, Schlussfolgerungen aus einem Beispiel zu ziehen.

Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#father
{
 width:150px;
 height:150px;
 background-color:red;
}
#father div
{
 width:50px;
 height:50px;
 background-color:green;
 font-size:12px;
}
</style>
<script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#father").prepend("<div>脚本之家欢迎您</div>");
})
</script>
</head>
<body>
<div id="father"></div>
</body>
</html>

Der obige Code kann ein Div zum übergeordneten Div hinzufügen. Als nächstes stellen wir vor, wie man ein Div löscht: 

$(document).ready(function(){
 $("#father").prepend("<div>脚本之家欢迎您</div>");
 $("div").remove("#father div");
})

Der obige Code kann das hinzugefügte Div entfernen.

Beispiel 2: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Add And Close Div</title> 
<script type="text/javascript教程" > 
$(document).ready(function(){ 
    bindListener();
})
function addimg(){ 
    $("#mdiv").append('<div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div>'); 
    
    // 为新元素节点添加事件侦听器
    bindListener();
}
// 用来绑定事件(使用unbind避免重复绑定)
function bindListener(){
    $("a[name=rmlink]").unbind().click(function(){
        $(this).parent().remove(); 
    })
}
</script>
 
</head> 
 <body> 
<form action="" method="post" enctype="multipart/form-data"> 
 <label>请选择上传的图片</label> 
  <a href="javascript:addimg()" id="addImg">增加图片</a> 
  <div class="mdiv" id="mdiv"> 
    <div class="iptdiv" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div> 
   </div> 
  <input type="submit" name="submit" value="上传图片" /> 
 </form> 
 </body> 
 </html>

Verwandte Lektüre:

1. Informationen zur prepend()-Funktion finden Sie im Kapitel zur prepend()-Methode von jQuery.

2. Informationen zur Funktion „remove()“ finden Sie im Methodenkapitel remove() von jQuery.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vergleich der Verwendung der Call-Methode und der Apply-Methode in JavaScript_GrundkenntnisseNächster Artikel：Vergleich der Verwendung der Call-Methode und der Apply-Methode in JavaScript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen