<p><strong>八、JQuery创建DOM元素</strong></p>
<p>js中创建DOM元素的方式有两种，为</p>
<p>document.createElement(); //object appendchild方式</p>
<p>var str="<span></span>"; //innerHTML方式</p>
<p>在JQuery中，结合了js的两种方式，</p>
<p>函数<span style="color:#f33b45;"><strong>$( )</strong></span>用于动态创建页面元素，语法格式为<strong>$(html)</strong>，其中参数html表示用于动态创建DOM元素的HTML标记字符串，例如：</p>
<p>要在页面动态创建一个<span>标签并设置其内容，代码可以为</p>
<p> <strong>var str=$("<span>小猫吃鱼</span>");</strong></p>
<p>创建完成，追加给父级节点，分为内部插入节点和外部插入节点两种方法。</p>
<p><strong>九、插入节点</strong></p>
<p><strong>内部插入节点：</strong></p>
<table border="1" cellpadding="1" cellspacing="1" style="width:681px;"><tbody><tr><td style="width:156px;">语法格式</td><td style="width:268px;">参数说明</td><td style="width:274px;">功能描述</td></tr><tr><td style="width:156px;">append（content）</td><td style="width:268px;">content表示追加到目标中的内容</td><td style="width:274px;">向所选择的元素内部插入内容</td></tr><tr><td style="width:156px;">append（function（index，html））</td><td style="width:268px;">通过function函数返回追加到目标中的内容</td><td style="width:274px;">向所选择的元素内部插入function函数所返回的内容</td></tr><tr><td style="width:156px;">appendTo(content)</td><td style="width:268px;">content表示被追加的内容</td><td style="width:274px;">把所选择的元素追加到另一个指定的元素集合中</td></tr><tr><td style="width:156px;">prepend(content)</td><td style="width:268px;">content表示插入目标元素内部前面的内容</td><td style="width:274px;">向每个所选择的元素内部前置内容</td></tr><tr><td style="width:156px;">prepend(function(index,html))</td><td style="width:268px;">通过function函数返回插入目标元素前面的内容</td><td style="width:274px;">向所选择的元素内部前置function函数所返回的内容</td></tr><tr><td style="width:156px;">prependTo(content)</td><td style="width:268px;">content表示用于选择元素的JQuery表达式</td><td style="width:274px;">将所选择的元素前置到另一个指定的元素集合中</td></tr></tbody></table>
<p>上面方法的示例如下代码：</p>
<pre class="blockcode"><code class="language-html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
.block{
width: 200px;
height: 100px;
background-color: #45baff;
}
</style>
</head>
<body>
<div class="block">小猫抓老鼠</div>
<div class="block1">
<p>1</p>
</div>
<div class="block1">
<p>2</p>
</div>
<div class="block1">
<p>3</p>
</div>
<script>
var str=$("<span>小猫吃鱼</span>");
//创建完成，追加span给block
// $(".block").append(str);//追加到所选择元素的内容之后
str.appendTo($(".block"));//追加到所选择元素的内容之后
//上面两行代码的作用相同，使用的方法不同
var sty=$("<span>小猫吃肉肉</span>");
$(".block").prepend(sty);//追加到所选择元素的内容之前
// sty.prependTo($(".block"));//追加到所选择元素的内容之前
//上面两行代码的作用相同，使用的方法不同
//function函数的示例
$(".block1").append(function(index,html){
console.log($(".block1").eq(index));//当前对象 输出为集合
//创建dom对象
var st=html;//将html里原本的值给st
$(this).html("");//将原来的<p>清空
var s=$("<span>"+st+"</span>");//定义s为<span>包裹<p>
return s;
});
</script>
</body>
</html></code></pre>
<p>上面代码的运行结果：</p>
<p><img alt="" class="blockcode" height="119" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-c6cd42465fe4690f08c978d4437df230.png" width="280"></p>
<p><img alt="" class="blockcode" height="340" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-79542eec386cdf338e626cb51b9d0494.png" width="235"></p>
<p><strong>外部插入节点：</strong></p>
<table border="1" cellpadding="1" cellspacing="1" style="width:620px;"><tbody><tr><td style="width:154px;">语法格式</td><td style="width:257px;">参数说明</td><td style="width:208px;">功能描述</td></tr><tr><td style="width:154px;">after(content)</td><td style="width:257px;">content表示插入目标元素外部后面的内容</td><td style="width:208px;">向所选择的元素外部后面插入内容</td></tr><tr><td st |
|
转播
