外部插入，jQuery源码解析（DOM与核心模块）教程-慕课网

外部插入

before()

根据参数设定，在匹配元素的前面插入内容：

before: function() {
        return this.domManip( arguments, function( elem ) {
            if ( this.parentNode ) {
                this.parentNode.insertBefore( elem, this );
            }
        });
}

类似after只是替换了第二个参数，改变插入的位置。

append()

在每个匹配元素里面的末尾处插入参数内容：

append: function() {
    return this.domManip( arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.appendChild( elem );
        }
    });
}

内部增加节点，直接可以调用appendChild方法。

prepend()

prepend: function() {
    return this.domManip( arguments, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            var target = manipulationTarget( this, elem );
            target.insertBefore( elem, target.firstChild );
        }
    });
},

类似after只是替换了第二个参数，改变插入的位置。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>DOM操作</title>
</head>
<body>
<button id="test1">模拟before处理</button>
<button id="test2">模拟append处理</button>
<button id="test3">模拟prepend处理</button>
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<script type="text/javascript">
// $('.inner').append('<p>Test</p>')
// $('.inner').before('<p>慕课网</p>')
// $('.inner').prepend('<p>Test</p>');
$('#test1').click(function() {
var inner = document.getElementsByClassName('inner')
for (var i = 0; i < inner.length; i++) {
var elem = inner[i]
var div = document.createElement('div')
div.innerHTML = '<p>before操作</p>'
elem.parentNode.insertBefore(div, elem)
}
})
$('#test2').click(function() {
var inner = document.getElementsByClassName('inner')
for (var i = 0; i < inner.length; i++) {
var elem = inner[i]
var div = document.createElement('div')
div.innerHTML = '<p>append操作</p>'
elem.appendChild(div)
}
})
$('#test3').click(function() {
var inner = document.getElementsByClassName('inner')
for (var i = 0; i < inner.length; i++) {
var elem = inner[i]
var div = document.createElement('div')
div.innerHTML = '<p>prepend操作</p>'
elem.insertBefore(div, elem.firstChild);
}
})
</script>
</body>
</html>

外部插入

任务