在线树状图的使用和制作

一、在线树状图思维导图

在线树状图可以用作思维导图，是一种被大众广泛使用的方法。其主要依据是树状图的三要素：结点、连线、标签。在线树状图思维导图可用于组织各种信息，例如课程大纲、计划流程、策略等，以便更好地记忆和理解。使用在线树状图思维导图，可以让您更加清晰地记住信息并思考问题。

以下是使用JavaScript、HTML和CSS制作在线树状图思维导图的示例代码：

  
  
  
  


  
  

    
   

      Root
      <input type="text" placeholder="Input root node content...">
      
    
+
    
    
   
  
  
  <script>
    let container = document.querySelector('.container');

    function appendNode(el) {
      let node = document.createElement('div');
      let line = document.createElement('div');
      let input = document.createElement('input');
      let addButton = document.createElement('div');

      node.classList.add('node');
      line.classList.add('line');
      addButton.classList.add('add-child');

      input.type = 'text';
      input.placeholder = 'Input child node content...';

      addButton.innerHTML = '+';

      node.appendChild(line);
      node.appendChild(input);
      node.appendChild(addButton);

      el.appendChild(node);

      addButton.onclick = function() {
        appendNode(node);
      }
    }

    let addButton = document.querySelector('.add-child');
    addButton.onclick = function() {
      appendNode(container);
    }
  </script>