是否可以将div元素存入sessionStorage，取出后追加到原页面位置？

sessionStorage仅支持存储字符串类型数据，你直接将DOM元素存入的操作会自动调用元素的toString()方法，最终存储的是[object HTMLDivElement]这类无意义的字符串，取出后自然无法作为DOM节点插入页面，这是报错的核心原因。
另外你的示例代码还存在两处语法错误：

• 循环取值时sessionStorage.getItem('n')中多了引号，应该传入变量n而非字符串'n'
• 存储的total值取出后是字符串类型，直接作为循环判断条件可能出现隐式类型转换问题，建议先转成数字

思路是存储DOM元素的HTML序列化字符串，读取时再将字符串解析为DOM节点插入，示例代码如下：

// 存储阶段：将DOM转为HTML字符串存入sessionStorage
for (let i = 0; i < children.length; i++) {
  const selectedrow = children[i];
  // 存元素的outerHTML，包含元素本身的标签和内容
  sessionStorage.setItem(`saved_row_${i}`, selectedrow.outerHTML);
}
sessionStorage.setItem('saved_total', children.length);

// 读取恢复阶段：将字符串转回DOM节点插入
const total = Number(sessionStorage.getItem('saved_total')) || 0;
for (let n = 0; n < total; n++) {
  const rowHtml = sessionStorage.getItem(`saved_row_${n}`);
  if (!rowHtml) continue;
  // 创建临时容器解析HTML字符串为DOM
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = rowHtml;
  const newRow = tempDiv.firstElementChild;
  // 插入到目标容器
  selected.appendChild(newRow);
}

// 如果不需要留存数据可以使用后清理
// sessionStorage.removeItem('saved_total');
// for (let n = 0; n < total; n++) {
//   sessionStorage.removeItem(`saved_row_${n}`);
// }

如果你的动态div绑定了事件监听器，通过outerHTML序列化存储的方式不会保留绑定的事件，这种情况建议你存储生成div所需的原始数据，页面重新加载后根据原始数据重新渲染div并绑定事件，稳定性会更高。

内容的提问来源于stack exchange，提问作者Sam Holland