用innerHTML后，之前input输入的数据都没了，是网页刷新了吗，求解答

最新推荐文章于 2023-02-15 09:26:06 发布
最新推荐文章于 2023-02-15 09:26:06 发布
阅读量1k 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tainanle8/article/details/105793953
版权
在使用document.innerHTML+=""方法后，先前在input中输入的数据丢失，疑似页面被刷新。通过步骤描述和代码展示，作者疑惑这是否是.innerHTML方法本身的特性，或是代码错误。已知使用createElement和appendChild可以避免这个问题，但作者希望了解这两种方法的区别。
摘要由CSDN通过智能技术生成

用innerHTML后，之前input输入的数据都没了，是网页刷新了吗，求解答

我操作的步骤：
（1）、用document.InnerHTML+=""方法增加了input标签
（2）、然后在增加的input标签中输入数据
（3）、再使用（1）方法，这时（2）步骤中的数据会消失，然后才出现新增加的input
步骤（1）的图
步骤（2）的图
步骤（3）的图
在这里插入图片描述
在这里插入图片描述
不管有多少数据都会没

代码：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  tainanle8
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
html输入时提示文字消失,html中input文字框，初始里边有文字提示。当点选时，文字消失，怎么改？...

				
			

			

				

					weixin_39583521的博客
				

				

					06-03
					
					1336
					
				

			

		

		

			
				
html中input文字框，初始里边有文字提示。当点选时，文字消失，怎么改？以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！中input文字框，初始里边有文字提示。当点选时，文字消失，怎么改？使用onfocus事件检查当前值,如果是预设值,就将value属性置空.如:单纯的文字框：(通常用使用者名称之类的)密码状态时 中...

			
		

	



                

              
                



	

		

			

				
					
2021前端知识总结-部分解答-持续更新

				
			

			

				

					JCat的博客
				

				

					03-12
					
					1279
					
				

			

		

		

			
				
一、h5c3部分
1.css实现垂直水平居中的方式？

行内元素，父元素设置：

div{
	height:60px
	line-height:60px;
	text-align: center; 
}


块级元素，已知宽度

div {
	width:100px;
	margin:0 auto;
}


块级元素，未知宽度-- flex/定位，
flex布局

div{
    display: flex;
    justify-content: center;
    align-items: ce

			
		

	



                


  
              

                


	

		

			

				
					
document InnerHTML input后 之前Input输入的数据都消失了

				
			

			

				

					米枔的博客
				

				

					03-19
					
					766
					
				

			

		

		

			
				
使用jq . $().append(htmlStr)就可以避免这个问题


			
		

	





	

		

			

				
					
js通过innerHTML向div中追加标签，添加后之前输入的内容都清空了解决方法

					
热门推荐

				
			

			

				

					群来群往的博客
				

				

					08-06
					
					1万+
					
				

			

		

		

			
				
function addFile(){

    var num = document.getElementById('newFileNumber').value;

    var tmp = document.createElement('p');

    tmp.innerHTML = '文件标题：'....;//补全你的内容

    document.getElemen

			
		

	



		

			
		



	

		

			

				
					
innerHtml追加元素时input值被清空

				
			

			

				

					做一件事之前就要做好最坏的打算
				

				

					09-01
					
					489
					
				

			

		

		

			
				
场景：动态追加元素时，已填写的input内容被清空。

			
		

	





	

		

			

				
					
document.getElementById('').innerHTML方法丢失form中输入框的值

				
			

			

				

					weixin_42610671的博客
				

				

					02-15
					
					444
					
				

			

		

		

			
				
如果您使用document.getElementById('').innerHTML方法去获取表单中的HTML元素，它可能会丢失输入框中的值。这是因为innerHTML方法返回的是该元素的HTML标记，而不是该元素的值。因此，如果您需要获取输入框中的值，建议使用value属性来代替innerHTML方法。例如，您可以使用document.getElementById('').value方法来获取输...

			
		

	





	

		

			

				
					
jquery 解决火狐innerHTML添加新内容时原来input的值丢失问题

				
			

			

				

					luoyahu
				

				

					06-09
					
					413
					
				

			

		

		

			
				
document.getElementById("adddiv").innerHTML += content;
源来代码是这样写的。因为是动态添加表格有输入的。所在原新输入的就会丢失。
火狐只支持标准的dom操作。
现在解决办法速度最快的是使用jquery来解决这个问题。
加入jquery支持。把代码改成
$('#adddiv').append(content);
只需要改一句就好了。...

			
		

	





	

		

			

				
					
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文

				
			

			

				

					CRPER
				

				

					03-13
					
					6516
					
				

			

		

		

			
				
前言


  去年年末研发组解散失业, so选择回去学车了,也顺利拿到了驾照
  
  最近回归大深圳….开始踏上漫漫的找工作之路;
  
  “拉勾上吊一百年不匹配!!!”,”BOSS直聘日夜没反应!!!”
  
  题目范围涵盖我最近遇到的笔试题和面谈的(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React)
  
  emm…..这里不列举哪些公司了, 若是你完整的阅读一...

			
		

	





	

		

			

				
					
My97DatePicker时间控件使用

				
			

			

				

					低调的http://
				

				

					07-10
					
					627
					
				

			

		

		

			
				
My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 

1、下载My97DatePicker组件包 

2、在页面中引入该组件js文件： 
     

3、页面使用两个方式： 
    常规调用:   
    图标触发： 
      
      
     注:$dp.$ 相当于 document.getElementById 

 



			
		

	





	

		

			

				
					
[JavaScript]基础知识复习题附答案

				
			

			

				

					m0_63949551的博客
				

				

					11-28
					
					4855
					
				

			

		

		

			
				
选择题

1、JavaScript脚本语言的前身是（）



A.Basic B.Live Script C.Oak D.VBScript



答案：B 难度容易



2、以下哪个不是javascript语言的特点：（）



 A. 基于对象B. 跨平台C. 编译执行D. 脚本语言



答案：C



难度容易



3标记符title是放在标记符什么之间的（）



A.html与html 



B.head与he...

			
		

	





	

		

			

				
					
IE Select的innerHTML丢失option的bug

				
			

			

				

					teclogid的专栏
				

				

					08-17
					
					556
					
				

			

		

		

			
				
http://support.microsoft.com/kb/276228

			
		

	





	

		

			

				
					
FF下innerHTML获取不到input标签中value的值解决办法

				
			

			

				

					whxblue的专栏
				

				

					04-05
					
					7033
					
				

			

		

		

			
				
页面代码：





很多时候，，，页面上input标签中的value需要通过javascript动态设置其值：document.getElementById('testid').value='test value';
通过document.getElementById(‘divid’).innerHTML：
IE下：
FF下：


这就达不到我们想要的效果。。。。。

			
		

	





	

		

			

				
					
innerHTML取不到被改变的input值

				
			

			

				

					weixin_43972670的博客
				

				

					06-10
					
					726
					
				

			

		

		

			
				
js

			
		

	





	

		

			

				
					
.innerHTML、.innerText、以及.nodeValue、以及input(这个自结束标签里面的内容，该如何获取的问题)

				
			

			

				

					qq_41633396的博客
				

				

					06-09
					
					901
					
				

			

		

		

			
				
首先.innerHTML、.innerText、.nodeValue均可以获取元素节点(对象)中的文本内容
但是也有不同，HTML可以获取一个元素（节点对象所包含的的其它的标签（元素对象)的内容，该元素的后代元素中，包含标签(元素)，那么也会被显示出来，这是和innerText的一个区别(会打印，该元素所包含的后代元素的标签)，但是，如果，该元素不包括非文本节点(对象)的其它节点(元素节点，注释节点等),那么此时.innerHTML和.innerText只会打印出该元素节点(对象)的文本内容）
元素节点（对

			
		

	





	

		

			

				
					
点击input文本框，文字消失  JS

				
			

			

				

					weixin_34372728的博客
				

				

					01-08
					
					1205
					
				

			

		

		

			
				

<HTML>
  <HEAD>
		<title>点击input文本框，文字消失</title>
		<script type="text/javascript">
			//得到焦点触发事件
		 function OnfocusFun(element,elementvalue)
{
	if(element.value...

			
		

	





	

		

			

				
					
关于innerHTML的用法,以及数据覆盖问题

				
			

			

				

					m0_46642164的博客
				

				

					02-21
					
					3899
					
				

			

		

		

			
				
JavaScript innerHTML使用及数据覆盖问题的解决

			
		

	





	

		

			

				
					
js原生：把 input输入的文本，通过点击事件之后 input框内输入的文字消失，出现在下面的 div中。

				
			

			

				

					陈浩然哦 的博客
				

				

					04-09
					
					2246
					
				

			

		

		

			
				
js原生：把 input输入的文本，通过点击事件之后 input框内输入的文字消失，出现在下面的 div中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-...

			
		

	





	

		

			

				
					
让innerHTML获取的内容包含input和select(option)的最新值

				
			

			

				

					
				

				

					01-16
					
					244
					
				

			

		

		

			
				
function refreshData(){ 
    var allInputObject=document.body.getElementsByTagName("input");
    for (i = 0; i < allInputObject.length; i++) {
        if(allInputObject[i].type=="checkbox...

			
		

	





	

		

			

				
					
使用Jquery实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。

				
			

			

				

					scscdstfxqxxzqqc的博客
				

				

					03-31
					
					3623
					
				

			

		

		

			
				
使用Jquery实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。


代码：
<!DOCTYPE html>
<html>

<head>
    <title>选择框</title>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

			
		

	





	

		

			

				
					
没有input输入数据吗

					
最新发布

				
			

			

				

					06-13
				

			

		

		

			
				
非常抱歉，我漏掉了输入数据的部分。在实现动态添加地址的过程中，当用户在输入框中输入地址信息时，我们需要将这些信息保存到地址元素中。以下是一个更新后的示例代码：

```html
<form>
  <label for="name">姓名：</label>
  <input id="name" type="text">
  <label for="phone">电话：</label>
  <input id="phone" type="text">
  <label for="address">地址：</label>
  <input id="address" type="text">
  <button id="add-address" type="submit">添加地址</button>
</form>
<ul id="address-list"></ul>

<script>
  const addBtn = document.getElementById('add-address');
  const addressList = document.getElementById('address-list');

  addBtn.addEventListener('click', (event) => {
    event.preventDefault();

    const newAddress = createNewAddressElement();
    addressList.appendChild(newAddress);
    newAddress.classList.add('slide-in');
  });

  function createNewAddressElement() {
    const addressElement = document.createElement('li');
    addressElement.classList.add('address-item');

    // 获取输入框的值
    const name = document.getElementById('name').value;
    const phone = document.getElementById('phone').value;
    const address = document.getElementById('address').value;

    // 创建地址内容元素
    const addressContent = document.createElement('div');
    addressContent.classList.add('address-content');
    addressContent.innerHTML = `
      <div><span>${name}</span><span>${phone}</span></div>
      <div>${address}</div>
    `;
    addressElement.appendChild(addressContent);

    // 创建删除按钮
    const deleteBtn = document.createElement('button');
    deleteBtn.classList.add('delete-address');
    deleteBtn.innerText = '删除';
    addressElement.appendChild(deleteBtn);

    // 为删除按钮添加点击事件处理函数
    deleteBtn.addEventListener('click', () => {
      addressList.removeChild(addressElement);
    });

    // 将地址元素设为不可见状态
    addressElement.style.opacity = '0';

    // 清空输入框
    document.getElementById('name').value = '';
    document.getElementById('phone').value = '';
    document.getElementById('address').value = '';

    return addressElement;
  }
</script>
```

在这个示例中，我们添加了一个表单元素，并将添加地址按钮的类型设为 `submit`，以便处理表单的提交事件。在点击添加地址按钮时，我们需要阻止默认的表单提交行为，以便我们能够处理添加地址的逻辑。因此我们在按钮的点击事件处理函数中添加了一个 `event.preventDefault()` 语句，用于阻止默认的表单提交行为。

在 `createNewAddressElement` 函数中，我们获取了输入框中的值，并将这些值保存到地址元素中。我们使用了一个模板字符串来定义地址内容元素的HTML代码，将姓名、电话和地址信息显示在同一个元素中。在创建完地址元素后，我们清空了输入框中的值，以便用户可以继续添加新的地址。

请注意，在这个示例中，我们假设用户输入框中的值都是合法的，并没有进行任何的验证。如果你需要对用户输入的值进行验证，请根据具体的需求进行修改。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值