使用jQuery可以方便的添加新的HTML元素。

下面的方法用于添加HTML元素：

append() – 在指定的元素的尾部添加一个新内容。

prepend() -在指定的元素里前部添加新内容。

after() – 在指定元素前添加新内容

before() -在指定元素的后面添加新内容。

乍一看append,prepend 和after,before似乎功能一样，但append,prepend指在选中的元素本身(内部)的前面和后面，而after,before指在选择中的元素的前面和后面。

jQuery使用下面两个方法来删除或是清空某个HTML元素。

remove() – 删除指定的元素(包括其子元素)

empty() – 清空指定元素的子元素

例如：

$(document).ready(function () {

$("button").click(function () {

$("#div1").remove();

});

});

Remove div element

$(document).ready(function () {

$("button").click(function () {

$("#div1").remove();

});

});

Remove div element

empty() 示例：

[html]

$(document).ready(function () {

$("button").click(function () {

$("#div1").empty();

});

});

Empty the div element

$(document).ready(function () {

$("button").click(function () {

$("#div1").empty();

});

});

Empty the div element

jQuery的remove()方法也支持一个参数，可以用于过滤一些需要删除的HTML元素。这个参数可以为任何有效的jQuery selector.

比如下面代码只删除class=”italic”的

元素：

[javascript]

$("p").remove(".italic");

$("p").remove(".italic");

使网页变得美观漂亮就要用CSS样式修饰，而作用到具体的html元素上得用class属性。应用多种多样，有时需要给html元素加上class属性，有时又需要把class属性删除。其实不修饰html元素不一定要把class属性删除，可以把它设为空，元素的样式同样不在。

在 javascript 中，删除html元素的class属性其实是移除属性，用 removeAttribute() 方法，不光移除class属性用这个方法，移除html元素的所有属性都用这个方法。

一、js删除class之div

假如有 div 元素如下：

用于div的CSS样式为：

.content{width:980px;margin:auto;}

//删除div的class属性

var obj = document.getElementById("divId");

obj.removeAttribute("class");//删除div的class属性

obj.class = "";//设置div的class属性为空

obj.setAttribute("class", "");//设置div的class属性为空(方法二)

二、js删除class之ul li、ol li

1、假如有 ul li 如下：

• javascript删除ul li 的class属性

var ul = document.getElementById("ulId");

ul.removeAttribute("class");//删除ul的class属性

ul.class = "";//设置ul的class属性为空

ul.setAttribute("class", "");//设置ul的class属性为空(方法二)

//删除li的class属性

var li= ul.childNodes;//li是ul的孩子，可通过 childNodes 获得li

for (var i = 0; i < li.length; i++) {

li[i].removeAttribute("class");//循环删除所有li的class属性

}

如果li有Id，也可以通过Id获取li。如果要删除ul的第一个孩子，也可以通过 firstChild 获取；同理要删除ul的最后一个孩子可通过 lastChild 获取；删除中间的孩子在li没有Id的情况下，只能用循环。

2、假如有 ol li 如下：

1. javascript删除ol li的class属性

//删除ol的class属性

var ol = document.getElementById("ol");

ol.removeAttribute("class");//删除ol的class属性

//删除ol li的class属性

var ol = document.getElementById("ol");

var li = ol.firstChild;//li是ol的第一个孩子，可通过ol获取li

li.removeAttribute("class");//删除li的class属性

三、js删除class之img

假如有 img 如下：

var obj = document.getElementById("imgId");

obj.removeAttribute("class");

四、js删除class之table

假如有 tabel 如下：

var obj = document.getElementById("tableId");

obj.removeAttribute("class");

html隐藏div元素的方法：1、在div标签中使用hidden属性，添加“hidden="hidden"”语句即可。2、在div标签中使用style属性，添加“display: none;”样式即可。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

方法1：使用hidden属性

html hidden 属性规定对元素进行隐藏。

如果使用该属性，则会隐藏元素；隐藏的元素不会被显示。

可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素(比如选中复选框，等等)。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。

示例：

效果图：

方法2：使用display: none样式

display 属性规定元素应该生成的框的类型。设置：display: none; 隐藏对象

display: block;除了转换为块级元素之外，还有显示元素的意思

说明：

使用display: none;可以不占据空间的，把元素隐藏起来，所以动态改变此属性时会引起重排(改变页面布局)，可以理解成在页面中把该元素删除掉一样；不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。

示例：

效果图：