parentElement为null错误，无法找到移动元素的方法

问题描述

我的文档中有html，我想在另一个元素内移动。我有一个颜色选择器，您可以在这里找到详细信息：https://www.javascripting.com/view/really-simple-color-picker

当我定义parentColorEl时，它说该元素为null。我不知道为什么。我清楚地看到，有一个id后面是一个数字。父元素是div。

<div id="container">
</div>

<div><input id="color0" type="hidden" name="color0" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51,51,153);">&nbsp;</div></div>
<div><input id="color1" type="hidden" name="color1" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51,153);">&nbsp;</div></div>
<div><input id="color2" type="hidden" name="color2" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51,153);">&nbsp;</div></div>


<script>

class ColorButtons extends HTMLElement {
  constructor(index) {
    // Always call super first in constructor
    super();

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create spans
    var wrapper = document.createElement('span');
    wrapper.setAttribute('class','wrapper');

    shadow.appendChild(wrapper);
    
    let colorEl = document.getElementById('color'+index);
    
    let parentColorEl = colorEl.parentElement
    
    wrapper.appendChild(colorEl);
    
  }
}

customElements.define('color-buttons',ColorButtons);

function updateInterface(){

    container.innerHTML = "";
    
    for(i=0; i<3; ++i){
        container.appendChild(new ColorButtons(i));
    }
    
}
updateInterface()

</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

appendchild html javascript