2017.12.19日作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12.19日作业</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h2>2017.12.19作业</h2>
<style>
li{list-style: none}
</style>
<script>//复习习备注：emmet创建列表方法：ul>li{$$我是列表项}*5 + TAB键</script>
<ul>
<li>01我是列表项</li>
<li>02我是列表项</li>
<li>03我是列表项</li>
<li>04我是列表项</li>
<li>05我是列表项</li>
</ul>
<button onclick = "btn1()">点这里用源生js方法添加</button><br>
<button onclick = "btn2()">点这里用jquery的appendTo方法</button><br>
<button onclick = "btn3()">点这里用jquery的appendTo方法2</button><br>
<button onclick = "btn4()">点这里用jquery的append方法</button><br>
<button onclick = "btn5()">点这里用jquery的prepend</button><br>

<script>
//一、用原生js方法
function btn1(){
var ul = document.getElementsByTagName('ul')[0]
var li1 = document.createElement('li')
li1.innerHTML = '1.这是用源生js方法添加的'
li1.id = 'item1'
ul.appendChild(li1)
// 复习备注：
// li.innerHTML等同于：
// var textnode=document.createTextNode("text");//创建文本节点
// li.appendChild(textnode);//把文本节点内容添加到li元素中
}
//二、jquery方法:appendTo(在被选元素的内部结尾添加内容。)
function btn2(){
var li2 = $('<li>')
li2.html('2.这是用jquery方法添加的')
li2.appendTo('ul')//把li2插入到ul子元素集合的结尾处
}
function btn3(){
$("<b>.....这是用appendTo方法向选中的元素内部添加内容</b>").appendTo('li')
}
// append()方法
function btn4(){
$('ul').append('把这些内容添加到ul子元素的集合中')
}
function btn5(){
var li3 = $('<li>')
li3.appendTo('ul')
li3.html('点击第五个按钮后会在这一行前后上下添加新内容')
li3.prepend('<span style="color:red">我是前置内容</span>')
li3.append('<span style="color:blue">我是后置内容</span>')
li3.before('<p>我在上面</p>') //在该元素之前插入一个兄弟节点
li3.after('<li>我在下面</li>') //在该元素之后插入一个兄弟节点

}
</script>

</body>
</html>

相关文章