jQuery创建div/p元素的多种方式，多层元素嵌套的方法
jQuery创建div/p元素的多种方式，多层元素嵌套的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>武林编程</title>
<style>
.aa{
width:300px;height:30px;background-color:grey;
}
.bb{
width:200px;height:20px;background-color:pink !important;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
//正常创建HTML元素，可创建多层嵌套的代码
var firstdiv1 = $('<div id="ymDiv" class="aa"><span>aa</span> </div><br>');
//只能创建前面的div元素，后面的span会被打印出来
var firstdiv2 = $('<div id="ymDiv" class="aa"></div><br>').text("<span>aa</span>");
//正常创建div元素，不能在div里面嵌套其他元素比如p/button
var firstdiv3 = $('<div id="ymDiv" class="aa"></div><br>').text("aa");
//正常创建div元素，创建了同胞span元素，同级的。
var firstdiv4 = $('<div id="ymDiv" class="aa"></div><span></span><br>').text("aa");
$("body").append(firstdiv1);
$("body").append(firstdiv2);
$("body").append(firstdiv3);
$("body").append(firstdiv4);
});
</script>
</head>
<body>
</body>
</html>
