<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>13.1jQueryDOM的创建</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1 使用jQuery创建元素节点
$('#btn1').click(function(){
//创建一个列表项对象
var $li_1 = $('<li></li>');//创建对象
var $li_2 = $('<li></li>');
$li_1.text("1");
$li_2.html("<b>2</b>");
//将创建的对象追加到ul中
$('ul').append($li_1);
$('ul').append($li_2);
});
//2 使用jQuery创建文本节点
$('#btn2').click(function(){
var $li_3 = $('<li>3</li>');
var $li_4 = $('<li><i>4</i></li>');
$('ul').append($li_3);
$('ul').append($li_4);
});
//3 使用jQuery创建属性节点
$('#btn3').click(function(){
var $li_5 = $("<li style='color:red'>5</li>");
var $li_6 = $("<li style='color:blue'><b>6</b></li>");
$('ul').append($li_5);
$('ul').append($li_6);
});
//4 使用DOM创建元素
$('#btn4').click(function(){
var oLi_7 = document.createElement('li');
oLi_7.innerHTML = '7';
oLi_7.style.color = 'green';
$('ul').append(oLi_7);
});
//5 使用HTML创建元素
$('#btn5').click(function(){
var oLi_8 = '<li><strong>8</strong></li>';
$('ul').append(oLi_8);
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="使用jQuery创建元素节点"><br>
<input type="button" id="btn2" value="使用jQuery创建文本节点"><br>
<input type="button" id="btn3" value="使用jQuery创建属性节点"><br>
<input type="button" id="btn4" value="使用DOM创建元素"><br>
<input type="button" id="btn5" value="使用HTML创建元素"><br>
<ul>
</ul>
</body>
</html>
效果图
单击所有按钮后效果图
