为什么在创建新的文本区域后重置我的值？

Question

我有以下问题，使用此代码我可以创建一个具有textarea的房间，在我用值填充此值并创建一个新房间并再次填充后，将重置所有第一个textarea的只有最后一个具有值的...var rooms = {};function addRoom(name, data) {  rooms[name] = data;}function updateRoom(name, key, value) {  rooms[name][key] = value;}var Room = function() {  this.description = 0;};function createroom() {  var roomname = document.getElementById('innerhtml').value;  var coldiv = document.createElement('div');  coldiv.className = "col-md-6 mb-3";  coldiv.setAttribute("id", `room_col_${roomname}`);  var room = document.createElement('div');  room.className = "text-center roombox";  room.innerHTML = roomname;  room.setAttribute("id", `room_count_${roomname}`);  room.setAttribute("data-toggle", `modal`);  room.setAttribute("data-target", `#room${roomname}`);  var roomnamehidden = document.createElement('input');  roomnamehidden.setAttribute("name", "roomname");  roomnamehidden.setAttribute("type", "hidden");  roomnamehidden.setAttribute("value", `${roomname}`);  document.getElementById("rooms").appendChild(coldiv).appendChild(room);  document.getElementById("rooms").appendChild(roomnamehidden);我怎么说我每次只获得textarea的最后一个值，我需要所有值，为什么要重置其他值？我怎么了？

Answer 1

该语句引起了问题：

document.getElementById("rooms").innerHTML += '<div ... // etc

innerHTML读取rooms元素的属性，并将其与的右手边串联+=并写回。读取时，它返回已经在rooms元素中的textarea元素的标签，但不返回其content。因此，每次添加新房间时，它都会重新创建现有的textarea，其中没有任何内容。

该元素.insert相邻的HTML（）被介绍的方法来解决这个确切的问题。从风格上讲，我不建议将其 "innerhtml"用作元素ID。