Javascript 如何将div编辑为textarea并上载/删除现有图像

我有一个网站，用户可以上传图像，名称和描述。我将它保存在mysql中，并获取这些信息以显示在我的网站上。这就是我下面的代码所做的，让用户输入这些信息（图像和文本），并在他们单击submit按钮时显示在网站上

我的问题是，当用户单击编辑按钮时，如何使div（显示图像、名称和描述）可编辑（因此将同一div更改为textarea或可编辑的内容），并且对于图像，当单击编辑按钮时，图像附近应该有一个十字标记，以便用户可以删除它并上载按钮以上载更多图像

我所做的：我尝试使用javascript获取div的值，并使用该值将其更改为textarea，但它表示

网格

div的值未定义

那么，我如何才能使我的div如上所述可编辑，因为我迄今为止所做的尝试还没有完成，那么有没有更好的方法使div可以像我上面所解释的那样可编辑，以便用户可以编辑文本和上传或删除图像

我的代码：

 <?php
    
    require "database.php"; // connecting to database
    session_start();
    
    global $username;
    $username = $_SESSION['userUsername'].$_SESSION['userId']; //fetching the username
  
    
    $image = "userPos/$username"; //fetching image posted by specific user
    
    function listFolderFiles($dir, $username){
    
   <!-- The div my_class is getting the images from local storage
         that was initially uploaded by user in the website
 (and we stored it in the local storage) to display them on the website -->

    echo '<div class="my_class">';  
        $ffs = scandir($dir);
    
        unset($ffs[array_search('.', $ffs, true)]);
        unset($ffs[array_search('..', $ffs, true)]);
        // prevent empty ordered elements
        if (count($ffs) < 1)
            return;
   
        foreach($ffs as $ff){
      
        $s = "'<li>'.$ff";
         $saving = "$dir/$ff";
          $string = "$saving";
          global $string_arr;
          $string_arr = (explode("/",$string));
          $sav;
          $sav =  '<li>'.$ff;
          global $sa;
          $sa = "$ff";
          
          echo '<div class="imagess">';
    
       
           if(is_file($saving)) {
            
            echo '
     <div class="images">
          <img src="'.$saving.' " width="100" height="100" alt="Random image" class="img-responsive"  />
          </div>
            
            ' ;
           }
           echo `</div>`;
    
        
            if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff, $username);
        
        }
        echo `</div>`;
       
    
     
        require "database.php";
    
        <!--Here we are fetching the name and description
         that was entered by user on the website
          and displaying them on the website now-->

        $username = $_SESSION['userUsername'].$_SESSION['userId'];
        
        $sql = "SELECT * FROM `_desc` WHERE `username` = '$username' AND `id` = '$string_arr[2]';";
        
        $result = mysqli_query($conn, $sql);
        $resultCheck = mysqli_num_rows($result);
        
     
        if($resultCheck > 0) {
            echo '</br>';
        
            while($row = mysqli_fetch_assoc($result) ) {
               //name and desc
                echo '<div class="grid">' . '<h2>' .  $row["_name"] . '</h2>' . '</div>';
               
                echo '<div class="grid2">' . '<p>' .  $row["_desc"] . '</p>' . '</div>';
          
              
            }
    
    <!--Here I am trying when user click on edit button it should
     change that div to editable textarea so user can edit
      and save it or delete the whole div-->
   
     echo '<button onClick="editName()" class="btn btn-info"> 
      Edit</button>';
        echo '<a href="deleteUserInfo.php?edit= '. 
       $row["id"].'"class="btn btn-danger ">Delete</a>';
    
           
        }
        echo '</div>';
    }
    listFolderFiles($image, $username);
    
   
    ?>
      <script>



function editName() {
    console.log("calling");
    var divName = $("grid").html(); 
    console.log(divName); //value is undefined here
    var editableName = $("<textarea />");
    editableName.val(divName);
    $("grid").replaceWith(editableName);
    editableName.focus();
    editableName.blur(saveName);

}

function saveName() {
    var htmlName = $(editableName).html();
    var viewableText = $("<div>");
    viewableText.html(htmlName);
    $(editableName).replaceWith(viewableText);

    $(viewableText).click(editName);
}

</script>  
    
    
    </body>
    </html>

函数editName（）{
控制台日志（“调用”）；
var divName=$（“网格”）.html（）；
console.log（divName）；//此处未定义值
变量editableName=$（“”）；
editableName.val（divName）；
$（“网格”）.replace为（editableName）；
editableName.focus（）；
editableName.blur（保存名称）；
}
函数saveName（）{
var htmlName=$（editableName）.html（）；
变量viewableText=$（“”）；
html（htmlName）；
$（editableName）.replaceWith（可视文本）；
$（可视文本）。单击（编辑名称）；
}

当用户单击编辑按钮时，在目标元素上将

contenteditable

属性设置为true，并将焦点设置为该元素

function editName() {
    $("grid").attr("contenteditable", true);
    $("grid").focus();
    $("grid").blur(saveName);
}

---

这很简单，您应该使用可用的

contenteditable

属性并将该值设置为true。这将使div元素可编辑

像这样,

---

我是可编辑的这很像一个复制：复制的，但我想使用php和html的混合，因为我的代码在php中，所以我不知道如何做