继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

一眼看破插入节点的8个方法

人生还有多少个二十年
关注TA
已关注
手记 19
粉丝 13
获赞 492
一、直接看效果

效果图

二、总结:
        1.jquery插入节点为什么会有8个方法?
            一个标签由开始标签和结束标签组成,因为标签的前后、内外和表述方式的不同,而造就了8个方法。
            eg://两句话理解“内外”的含义
                1)教室的前面有一棵树            //外面的前面
                2)教室的前面有一张讲台         //里面的前面    
                //两句话理解“表述方式不同”的含义
                1)给 我 钱               //这种表达方式,目标(target)在前,内容(content)在后
                2)把 钱 给 我            //这种表达方式,内容(content)在前,目标(target)在后
         2. $(target).append(content)/$(content).appendTo(target) - 在被选元素的内部的结尾插入内容
            $(target).prepend(content)/$(content).prependTo(target) - 在被选元素的内部的开头插入内容
            $(target).after(content)/$(content).insertAfter(target) - 在被选元的素外部之后插入内容
            $(target).before(content)/$(content).insertBefore(target) - 在被选元素的外部之前插入内容

        3.插入节点的方法不仅能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动
三、上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>插入节点</title>
<style type="text/css">
div{
    background:lightblue;
    width:120px;
    color:red;
    padding:10px;}
img{
    display:block;
    padding:10px;
    background:#e8e8e8;
    width:100px;
    height:100px;
}
</style>
</head>

<body>
<div>知人者智</div>
<select>
    <option>    </option><!--选中此项则将页面还原为初始状态-->
    <option>append</option>
    <option>appendTo</option>
    <option>prepend</option>
    <option>prependTo</option>
    <option>after</option>
    <option>insertAfter</option>
    <option>before</option>
    <option>insertBefore</option>
</select>
<script src="jquery/jquery-2.2.3.js"></script><!--路径记得用自己电脑的文件夹路径来代替-->
<script>
$(function(){
    var $div = $("div"),
        $addImg = $("<p><img src='images/t01ab7e06858b5f3e99.jpg'></p>"),//自己找个图片,使用自己的图片路径
        $select = $("select");
//如果以下这一段代码看不懂,可以使用附于最后含有switch语句的代码,两段选其一即可。       
    $select.change(function(){
        var selectedVal = $select.find("option:selected").val();
        if(selectedVal){//如果选中的不是第一项(第一项为空字符串,将其转换为布尔值则为false)
            if(selectedVal.length<8){//如果选中项的值的长度小于8,即选中的是(append、prepend、after、before)之一。
                    $div[selectedVal]($addImg);
            }else{//如果选中项的值的长度不小于8,即选中的是(appendTo、prependTo、insertAfter、insertBefore)之一。
                    $addImg[selectedVal]($div);}
            }
        else{//选中第一项则将页面还原为初始状态
            $div.html("知人者智").siblings("p").remove();}
            });
    });
</script>
</body>
</html>
可做替补的代码段:
    $select.change(function(){
        switch($select.find("option:selected").val()){
        case "append":
            $div.append($addImg);
        break;
        case "appendTo":
            $addImg.appendTo($div);
        break;
        case "prepend":
            $div.prepend($addImg);
        break;
        case "appendTo":
            $addImg.prependTo($div);
        break;
        case "append":
            $div.prependTo($addTxt);
        break;
        case "appendTo":
            $addImg.appendTo($div);
        break;
        case "after":
            $div.after($addImg);
        break;
        case "insertAfter":
            $addImg.insertAfter($div);
        break;
        case "before":
            $div.before($addImg);
        break;
        case "insertBefore":
            $addImg.insertBefore($div);
        break;
        default:
            $div.html("知人者智").siblings("p").remove();
        break;
        }
        });
打开App,阅读手记
11人推荐
发表评论
随时随地看视频慕课网APP