当子元素仅在onClick事件上呈现时，如何定位和分配特定子元素

<div id="container">
  <!-- 子元素将在这里动态生成 -->
</div>

document.getElementById('container').addEventListener('click', function(event) {
  // 创建子元素
  const childElement = document.createElement('div');
  childElement.className = 'child';
  childElement.textContent = '点击生成的子元素';

  // 将子元素添加到父元素中
  this.appendChild(childElement);

  // 定位并分配特定子元素
  const specificChild = this.querySelector('.child');
  specificChild.style.color = 'red'; // 示例操作
});

.child {
  padding: 10px;
  border: 1px solid #ccc;
}

document.getElementById('container').addEventListener('click', function(event) {
  const childElement = document.createElement('div');
  childElement.className = 'child';
  childElement.textContent = '点击生成的子元素';
  this.appendChild(childElement);

  // 使用setTimeout确保DOM更新完成
  setTimeout(() => {
    const specificChild = this.querySelector('.child');
    specificChild.style.color = 'red';
    specificChild.addEventListener('click', function() {
      alert('子元素被点击');
    });
  }, 0);
});