要实现一个保留属性的在线HTML编辑器，你可以使用JavaScript来解析和操作HTML代码。下面是一个基本的解决方法示例：

HTML部分：

  
  更新预览
  

JavaScript部分：

function updatePreview() {
  var htmlCode = document.getElementById("htmlCode").value;
  var preview = document.getElementById("preview");

  // 清空预览区域
  preview.innerHTML = "";

  // 创建临时div元素
  var tempDiv = document.createElement("div");
  tempDiv.innerHTML = htmlCode;

  // 将临时div的所有子元素添加到预览区域
  while (tempDiv.firstChild) {
    preview.appendChild(tempDiv.firstChild);
  }
}

上述代码中，我们首先获取了HTML代码输入框和预览区域的DOM元素。然后，当用户点击"更新预览"按钮时，我们获取输入框中的HTML代码。接下来，我们创建一个临时的div元素，并将HTML代码设置为其innerHTML。然后，我们将临时div的所有子元素添加到预览区域中。

这样就可以实现一个简单的在线HTML编辑器，它能够保留HTML代码中的属性。你可以根据需要扩展和改进这个示例，例如添加更多编辑功能、样式等。