我们可以使用jQuery方便的添加或删除元素。
1、使用jQuery生成新元素,生成新元素的方法,比如,我要生成一个有序列表的标签,只需要:
var ol = $('<ol></ol>');
即可
2、append()方法:
在元素的的内容后面添加元素
我们可以使用jQuery来添加元素,上面的例子中只有一个ol标签肯定是不行的,还需要给里面添加li标签,这时候就可以使用:
ol.append($('<li>瓦尔登湖</li>'));
ol.append($('<li>小王子</li>'));
ol.append($('<li>西游记</li>'));
3、prepend() 方法:
在被选元素的内容前面添加元素:
现在又有一个新的需求,需要给ol标签的最前面添加一行列表,就可以使用prepend()方法:
ol.prepend($('<li>水浒传</li>'));
4、before()方法:
在被选元素之前添加元素:
比如有一个img标签,要在img标签的前面添加一个p标签:
var p1 = $('<p>前面的段落</p>');
$("#img1").before(p1);
5、after()方法:
在被选元素之后添加元素:
同样的道理,在img标签的后面添加一个p标签:
var p2 = $('<p>后面的段落</p>');
$("#img1").after(p2);
6、删除HTML中的元素:
remove():
remove方法可以删除HTML中的元素,比如我想删除ol中的某一li标签,其添加的代码为:
var ol = $('<ol id="books"></ol>');
ol.append($('<li id="book2">瓦尔登湖</li>'));
ol.append($('<li>小王子</li>'));
那么删除id为book2的li的方法为:
$("#book2").remove();
7、清空元素:
empty():
empty方法可以清空HTML元素中的所有元素,比如清空ol中所有的元素:
$("#books").empty();
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!