Home >Web Front-end >JS Tutorial >Detailed explanation of the steps to dynamically operate divs with jQuery

Detailed explanation of the steps to dynamically operate divs with jQuery

php中世界最好的语言Original: 2018-04-23 15:18:471773browse

This time I will bring you a detailed explanation of the steps of jQuery dynamic operation div. What are the precautions of the jQuery dynamic operation div step. The following is a practical case, let's take a look.

Code examples are as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#father
{
 width:150px;
 height:150px;
 background-color:red;
}
#father p
{
 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("<p>脚本之家欢迎您</p>");
})
</script>
</head>
<body>
<p id="father"></p>
</body>
</html>

The above code can add a p to the parent p. Next, we will introduce how to delete a p. Only the core code is given below:

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

The above code can remove the added p.

Example 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 p</title> 
<script type="text/javascript教程" > 
$(document).ready(function(){ 
    bindListener();
})
function addimg(){ 
    $("#mp").append('<p class="iptp" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></p>'); 
    
    // 为新元素节点添加事件侦听器
    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> 
  <p class="mp" id="mp"> 
    <p class="iptp" ><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></p> 
   </p> 
  <input type="submit" name="submit" value="上传图片" /> 
 </form> 
 </body> 
 </html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of the steps to dynamically operate divs with jQuery

Related articles