如何在w2layout中正确添加标准HTML元素（如按钮）

嘿，我完全懂你碰到的这个问题——用w2layout的html()方法加原生HTML元素时，它居然把按钮显示成了[object HTMLButtonElement]，而不是实际的按钮。这其实是因为html()方法对非w2ui组件的处理逻辑导致的：当你传入的不是w2ui的组件实例（比如w2grid）时，它会默认把传入的内容转成字符串输出，所以原生DOM元素就被转成了它的字符串表示，而不是被渲染出来。

给你两个解决办法，其中第一个更贴合你需要动态添加删除元素的需求：

• 方法一：直接操作面板的DOM容器（推荐）
  不要用html()方法，而是先拿到目标面板对应的DOM容器，再用原生DOM方法把元素加进去。修改你的代码如下：

  let layout = new w2layout(outerConfig.layout);
  let grid = new w2grid(outerConfig.grid);
  let formLayout = new w2layout(innerConfig.layout);
  let form = new w2form(innerConfig.form);
  let btn = document.createElement ('button');
  btn.className = "w2ui-btn";
  btn.innerText = "test";
        
  layout.render('#outerdiv');
  layout.html('left', grid);
  layout.html('main', formLayout);
  formLayout.html('main', form);
  
  // 替换原来的formLayout.html('bottom', btn)
  const bottomPanelContainer = formLayout.get('bottom').el;
  bottomPanelContainer.appendChild(btn);
  

  这里formLayout.get('bottom').el会获取到bottom面板对应的DOM容器，用appendChild把按钮加进去后，就能正常显示了。后续你要动态删除按钮的话，直接调用btn.remove()就行，完全满足你的动态操作需求。

• 方法二：将DOM元素转为HTML字符串（不推荐动态场景）
  如果你一定要用html()方法，可以把DOM元素转成HTML字符串传入，但这种方式会丢失原DOM元素的引用，后续不好动态操作：

  formLayout.html('bottom', btn.outerHTML);
  

为什么加w2grid没问题？因为html()方法能识别w2ui的组件实例，会自动调用组件的render()方法来渲染它，但原生DOM元素不在这个处理逻辑里，所以才会出现异常。

备注：内容来源于stack exchange，提问作者Peter Horvath