Javascript 动态选择最近的<；ul>；当按钮按下时

在html页面中，我有以下html提供的许多按钮：

<div class="container text-center">
  <h1>Mic Recorder to Mp3 Example</h1>
  <p>Check your web developer tool console.</p>
  <button class="btn btn-primary">Start recording</button>
  <ul id="playlist"></ul>
</div>

<div class="container text-center">
  <h1>Mic Recorder to Mp3 Example</h1>
  <p>Check your web developer tool console.</p>
  <button class="btn btn-primary">Start recording</button>
  <ul id="playlist"></ul>
</div>

<div class="container text-center">
  <h1>Mic Recorder to Mp3 Example</h1>
  <p>Check your web developer tool console.</p>
  <button class="btn btn-primary">Start recording</button>
  <ul id="playlist"></ul>
</div>

---

如果我正确理解了这个问题，您可以使用

closest（）

方法

closest（）

方法遍历

元素及其父元素（指向文档根），直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素，则返回
null

如果我正确理解了这个问题，您可以使用
最近（）方法

closest（）
方法遍历
元素及其父元素（指向文档根），直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素，则返回
null

当我喜欢document.querySelector.closest（“#playlist”）.appendChild（li）；它说querySelector.closest（）不是一个函数。有什么想法吗？closest（）需要一个参数
var closestElement=targetElement.closest（选择器）是的，做最近的（'li'）也没有给出任何结果。与document.querySelector（“#playlist”）.appendChild.closest（li）相同；不知道为什么否决票。。。但根据您上次的评论，不确定document.querySelector（“#playlist”）.appendChild.closest（li）；会做你想做的事。如果您试图从'li'
let closestUl=document.querySelector（'li'）。closest（'ul'）
中查找最近的'ul'，谢谢您的帮助，我需要识别按下按钮的div，并在该div中填充#播放列表。当我喜欢document.querySelector.closest（'#playlist'）。appendChild（li）；它说querySelector.closest（）不是一个函数。有什么想法吗？closest（）需要一个参数
var closestElement=targetElement.closest（选择器）是的，做最近的（'li'）也没有给出任何结果。与document.querySelector（“#playlist”）.appendChild.closest（li）相同；不知道为什么否决票。。。但根据您上次的评论，不确定document.querySelector（“#playlist”）.appendChild.closest（li）；会做你想做的事。如果您试图从'li'
let closestUl=document.querySelector（'li'）。closest（'ul'）
中查找最近的'ul'，谢谢您的帮助，我需要确定按下按钮的div并填充该div中的#播放列表。
const buttons = document.querySelectorAll('button');
const recorder = new MicRecorder({
  bitRate: 128
});

buttons.forEach(button => button.addEventListener('click', startRecording));

function startRecording() {
  recorder.start().then(() => {
    buttons.forEach(button => {
      button.textContent = 'Stop recording';
      button.classList.toggle('btn-danger');
      button.removeEventListener('click', startRecording);
      button.addEventListener('click', stopRecording);
    });
  }).catch((e) => {
    console.error(e);
  });
}

function stopRecording() {
  recorder.stop().getMp3().then(([buffer, blob]) => {
    console.log(buffer, blob);
    const file = new File(buffer, 'music.mp3', {
      type: blob.type,
      lastModified: Date.now()
    });

    const li = document.createElement('li');
    const player = new Audio(URL.createObjectURL(file));
    player.controls = true;
    li.appendChild(player);

    document.querySelector('#playlist').appendChild(li);
    buttons.forEach(button => {
      button.textContent = 'Start recording';
      button.classList.toggle('btn-danger');
      button.removeEventListener('click', stopRecording);
      button.addEventListener('click', startRecording);
    });
  }).catch((e) => {
    console.error(e);
  });
}