清除前端标签中（输入框）的内容

这个问题还是前段时间遇到，最近双十一刚过，就把遗留的一些小问题来总结一下，这个问题就比较简单了，不做过多解释了。

清除标签中的内容方法：

1.原生js方法

(1)input框中的内容

代码语言：javascript代码运行次数：0运行复制

document.getElementById("inputId").value="";

(2)其他标签的内容

代码语言：javascript代码运行次数：0运行复制

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

牢记：

input标签的值是通过value属性来设置的； 其他大多数标签都是通过innerHTML来设置的；

原因：

input是单标签，没有innerHTML属性。只能通过value属性来设置其中的内容； innerHTML 属性可设置或返回单元格的开始标签和结束标签之间的 HTML，即只有双标签才有innerHTML属性。

---

2.jquery实现

代码语言：javascript代码运行次数：0运行复制

<code id="show"></code>
<a href="javascript:clearWindow();">清除内容</a>
function clearWindow(){
	$("#show").empty();
}

a.

代码语言：javascript代码运行次数：0运行复制

$('#show').html('');

b.

代码语言：javascript代码运行次数：0运行复制

$('#show').empty();

jquery的两种方式有区别：

a方法：

(’#show’).html(’’);会造成内存泄漏，它只清空该对象的内部元素，但是不会清除注册在内部元素上的事件。如果id=show的code标签上还注册有其它事件，那些事件代码也要占用内存。你使用$(’#show’).html(’’);来清空标签的内容，当然也可以清空内容，但是注册在这些code标签上的事件代码并没有被清理掉，这些事件代码仍然保留在内存里，并且无法得到释放。

b方法：

(’#show’).empty();会清空内容和注册在该标签上的事件，因此这样就防止内存泄露。

一般我用到的是js原生方法，jquery实现方法比较少用，一定要避免使用内存泄漏的清空方法

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-07，如有侵权请联系 cloudcommunity@tencent 删除前往查看内存内存泄漏前端事件标签