点击TreeView的li元素时获取文本值并显示在Bootstrap模态框中

核心思路 #

• 给每个li旁的添加按钮绑定点击事件，触发模态框的同时，从对应li里提取文本，填充到模态框的输入框里。
• 利用DOM层级关系定位li，不管嵌套多深都能准确获取目标文本。

HTML结构示例 #

<!-- 嵌套TreeView -->
<ul class="tree-view">
  <li>
    父节点1
    <button class="add-btn" data-bs-toggle="modal" data-bs-target="#nodeModal">
      <i class="bi bi-plus"></i> 添加
    </button>
    <ul>
      <li>
        子节点1-1
        <button class="add-btn" data-bs-toggle="modal" data-bs-target="#nodeModal">
          <i class="bi bi-plus"></i> 添加
        </button>
        <ul>
          <li>
            孙节点1-1-1
            <button class="add-btn" data-bs-toggle="modal" data-bs-target="#nodeModal">
              <i class="bi bi-plus"></i> 添加
            </button>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    父节点2
    <button class="add-btn" data-bs-toggle="modal" data-bs-target="#nodeModal">
      <i class="bi bi-plus"></i> 添加
    </button>
  </li>
</ul>

<!-- Bootstrap模态框 -->
<div class="modal fade" id="nodeModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">节点操作</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="nodeInput">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

JavaScript代码 #

// 批量绑定所有添加按钮的点击事件
document.querySelectorAll('.add-btn').forEach(btn => {
  btn.onclick = function() {
    // 找到当前按钮所属的li元素
    const targetLi = this.closest('li');
    // 提取li的纯文本（排除按钮和子元素的干扰）
    const liText = Array.from(targetLi.childNodes)
      .filter(node => node.nodeType === 3) // 只取文本节点
      .map(txt => txt.textContent.trim())
      .join('');
    
    // 把文本填充到模态框的输入框里
    document.getElementById('nodeInput').value = liText;
  };
});

注意事项 #

• 确保已经引入Bootstrap的CSS和JS文件，不然模态框无法正常弹出。
• 如果li里还有其他非文本元素（比如图标），filter(node => node.nodeType === 3)会自动过滤掉，只保留纯文本内容。
• closest('li')方法兼容性很好，现代浏览器都支持，不用怕嵌套层级问题。

内容的提问来源于stack exchange，提问作者Andandydongola