js 清除html页面,如何使用JavaScript清除div的内容？

JavaScript提供清除div内容的功能，想要执行此功能有两种方法：一种是使用innerHTML属性，另一种是使用firstChild属性和removeChild()方法。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。

方法1：使用innerHTML属性

HTML DOM对象的innerHTML属性用于设置或返回元素的HTML内容。只有将innerHTML属性设置为none就可清除div的内容。

使用JavaScript清除div的内容

#clear {

border: 2px dashed #006600;

color: red;

padding-top: 40px;

opacity: 0.7;

width: 250px;

height: 200px;

border-radius: 10%;

text-align: center;

}

function clearcontent(elementID) {

document.getElementById(elementID).innerHTML = "";

}

div标签内

这是一段测试文本！

清除div的内容

效果图：

方法2：使用firstChild属性和removeChild()方法

DOM firstChild属性用于返回其父节点元素的firstChild节点；它是只读属性，不返回文本节点和注释节点。remove child()方法用于删除给定元素的指定子节点。它将删除的节点作为节点对象返回，如果节点不存在，则返回null。

方法2就是使用firstChild属性返回第一个子元素，使用removeChild()方法删除第一个子元素的内容。

使用JavaScript清除div的内容

#clear {

border: 2px dashed red;

color: red;

padding-top: 40px;

opacity: 0.7;

width: 250px;

height: 200px;

border-radius: 10%;

text-align: center;

}

function clearcontent(elementID) {

var div = document.getElementById(elementID);

while(div.firstChild) {

div.removeChild(div.firstChild);

}

}

div标签内

这是一段测试文本！

清除div的内容

效果图：