javascript - parentElement 为空错误，找不到移动元素的方法

Question

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

当我定义 parentColorEl 时，它说元素为空。我不知道为什么。我清楚地看到有一个颜色的 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, 51, 153);">&nbsp;</div></div>
<div><input id="color2" type="hidden" name="color2" value="#333399"><div class="colorPicker-picker" style="background-color: rgb(51, 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>

标签： javascripthtmlappendchild