如何使用 jQuery 将一个 DIV 元素移动到另一个元素中？

在本文中，我们将学习使用 jQuery 将一个 HTML div元素移动到另一个元素中。

HTML div元素用于定义 HTML 文档中的一个分区或一个部分。

使用的方法：

• parent() ：此方法用于获取当前匹配元素集合中每个元素的父元素，可选择由选择器过滤。
• 分离（）： 此方法用于从 DOM 树中删除所选元素，包括其所有文本和子节点，但保留数据和事件。
• attr() ：此方法用于设置或返回所选元素的属性和值。
• 追加（）： 此方法用于在所选元素的末尾插入 HTML 元素。

方法：

• 使用 Division 元素内的各种部门创建 HTML 页面。
• 接下来，使用上述方法创建一个函数来移动内部分割元素的onclick事件。

例子：

HTML

  
    
    
    
    
  
    
      body {
        text-align: center;
      }
      #nonSelected {
        position: absolute;
        top: 150px;
        left: 350px;
        width: 250px;
        height: 280px;
        background-color: lightblue;
        border-width: 2px;
        border-style: dotted;
        border-color: black;
        padding: 10px;
      }
  
      #selected {
        position: absolute;
        top: 150px;
        left: 20px;
        width: 250px;
        height: 280px;
        background-color: lightgreen;
        font-style: italic;
        border-width: 2px;
        border-style: solid;
        border-color: black;
        padding: 10px;
      }
    
  
  
    GeeksforGeeks
    Make groups of three colors.
  
    
      
        Inner division one
      
      
        Inner division two
      
      
        Inner division three
      
      
        Inner division one
      
      
        Inner division two
      
      
        Inner division three
      
      
        Inner division one
      
      
        Inner division two
      
      
        Inner division three
      
      
        Inner division one
      
      
        Inner division two
      
      
        Inner division three
      
      
        Inner division one
      
      
        Inner division two
      
      
        Inner division three
      
    
    
    
      function move(elem) {
        if ($(elem).parent().attr("id") == "nonSelected") {
          $(elem).detach().appendTo("#selected");
        } else {
          $(elem).detach().appendTo("#nonSelected");
        }
      }
    
  

输出：

一个div到另一个