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

水深无声 2022-12-21 00:56 274阅读 0赞

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

# 清除标签中的内容方法： #

## 1.原生js方法 ##

### (1)input框中的内容 ###

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

### (2)其他标签的内容 ###

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

#### 牢记： ####

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

#### 原因： ####

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

--------------------

## 2.jquery实现 ##

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

#### a. ####

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

#### b. ####

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

jquery的两种方式有区别：

#### **a方法：** ####

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

#### b方法： ####

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 thymeleaf输入框中内容显示在输入框外

问题运行SpringMVC+Mybatis项目，thymeleaf输入框中文字显示在输入框外详细问题相关代码 <!DOCTYPE html>

逃离我推掉我的手/ 2023年09月27日 23:25/ 0 赞/ 35 阅读

相关 vue实时监听input输入框中输入内容

1：根据官方文档change 输入框内容变化时的回调 <a-input-search style="width: 15%;height:3%;margin-top

绝地灬酷狼/ 2023年02月17日 03:47/ 0 赞/ 51 阅读

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

> 这个问题还是前段时间遇到，最近双十一刚过，就把遗留的一些小问题来总结一下，这个问题就比较简单了，不做过多解释了。清除标签中的内容方法： 1.原生js方法

水深无声/ 2022年12月21日 00:56/ 0 赞/ 275 阅读

相关 JQuery输入框中输入内容改变事件

输入框中输入内容改变事件 $('object').bind('input propertychange keyup', function() {

本是古典何须时尚/ 2022年07月16日 05:48/ 0 赞/ 230 阅读

相关 Android中ClearEditText实现点击EditText输入框右边清除图标来清除输入内容的两种方式

两种EditText输入框点击右边清除图标来实现清除功能的方式。效果图下图： ![Center][] 布局代码如下， \[html\] [view plain]

- 日理万妓/ 2022年06月03日 07:44/ 0 赞/ 357 阅读

相关清除input 输入的自动提示框

在<input type="text" name="" value=""/>时输入内容,input框下自动出现以往输入的提示; 加入autocomplete="off" 属性

爱被打了一巴掌/ 2022年05月14日 14:58/ 0 赞/ 379 阅读

相关实现输入框自带清除按钮

原文出处：[https://blog.csdn.net/qq\_26780317/article/details/79002409][https_blog.csdn.net_q

ゞ浴缸里的玫瑰/ 2022年04月13日 12:57/ 0 赞/ 489 阅读

相关 layui标签输入框inputTags

layui标签输入框inputTags 样式： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

「爱情、让人受尽委屈。」/ 2022年02月27日 01:44/ 0 赞/ 461 阅读

相关清除input输入框的历史记录

> 今天怂怂就为大家分享一篇清除input输入框历史记录的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随怂怂过来看看吧清除input输入框的历史记录，即在in

谁践踏了优雅/ 2022年02月24日 04:59/ 0 赞/ 785 阅读

相关如何让移到输入框，显示输入框中所有的内容

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

野性酷女/ 2022年02月23日 05:38/ 0 赞/ 262 阅读