<!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>
jquery源码解析(第2章之外部插入)
最新推荐文章于 2021-03-02 16:05:30 发布