一眼看破插入節(jié)點的8個方法

標(biāo)簽：

Html/CSS JQuery JavaScript

一、直接看效果

二、总结：
        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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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;
        }
        });

點擊查看更多內(nèi)容