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

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

不管有多少数据都会没

代码：

1
2
3
4
5
6

var text = "<tr><td><input type='text' name='inps'><td><input type='text' name='inps'></td></tr>",
btn = document.getElementById("btn"),
tbody = document.getElementById("tbody");
btn.onclick = function add_1() {
tbody.innerHTML += text;
}

我想问一下这是代码写错了还是.innerHTML方法的原因？按理说我用+=不会覆盖前面的内容啊

（我知道一种能解决的办法，就是换一种方法，用.createElement和.appendChild配合使用，这样也能实现效果。想知道这两种写法的区别。才接触js很多不懂，第一次发表问题希望能有大佬帮忙解答）