时间戳

首页 > 解决方案 > 使用 appendChild 到当前聚焦的元素

javascript - 使用 appendChild 到当前聚焦的元素

问题描述

考虑这段代码：

console.log('New node')
    var node = document.createElement("div");
    node.appendChild(document.createTextNode("+"));
    document.getElementById("elem").appendChild(node);
    <!DOCTYPE html>
    <html> 
       <body>
          <div id="elem">+</div>
           </body>
    </html>

因此，这当前添加"+"为新 div 的文本。

假设我想将另一个带有文本的子 div 添加">"到用户查看 index.html 当前关注的任何 div 中，考虑到他选择了一个动态创建的 div 的选项，我该如何实现呢？

标签： javascript

解决方案

您需要在 div 上设置选项卡索引以使其具有焦点，但随后您可以侦听焦点事件并存储最后一个焦点元素。您需要手动存储当前项目，而不是依赖于document.activeElement获取最后一个焦点元素，因为这会更改为您单击的按钮。

const appendbtn = document.querySelector('#appendit');
const addbtn = document.querySelector('#addbox');
let activeElement = null;
let counter = 0;
appendbtn.addEventListener('click', function() {
  if (activeElement) {
    const node = document.createElement('span');
    node.textContent = '>';
    activeElement.appendChild(node);
  }
});
addbtn.addEventListener('click', function() {
  const text = document.createElement('span');
  text.textContent = 'Box ' + (counter++);
  
  const box = document.createElement('div');
  box.tabIndex = 0;
  box.classList.add('box');
  box.addEventListener('focus', function() {
    if (activeElement) {
      activeElement.classList.remove('selected');
    }
    activeElement = box;
    activeElement.classList.add('selected');
  });
  box.appendChild(text);

  const container = document.querySelector('.boxes');
  container.appendChild(box);
});
.box {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 1rem;
  padding: 1rem;
}

.box.selected {
  background-color: #f9f9f9;
}
<div class="boxes">
</div>
<button id="addbox">
  Add box
</button>
<button id="appendit">
  Append chevron
</button>

推荐阅读