Question

如何在javascript中创建具有特定名称的文件夹？我不想在PC中创建文件夹，只是创建内部具有特定内容的HTML div。当我点击“创建新文件夹”时输入名称，然后点击输入div后出现在“创建新文件夹”部分下方。我不想硬编码所有元素等等，所以也许有一种更简单的方法可以做到这一点？

我想创建这样的东西，但在javaScript中附加此代码将是无稽之谈

<div class="new_folder">
     <div class="folder_icon">
          <div class="folder_icon_border">
               <div class="folder_icon_bubble"></div>
               <div class="folder_icon_bubble"></div>
               <div class="folder_icon_bubble"></div>
           </div>
      </div>
      <div class="folder_name">
          <p class="folder_name_txt"></p>
      </div>              
      <div class="folder_do">
          <div class="icon" ng-click="someFunction()"></div>
      </div>
</div>

Answer 1

有多种方法可以做到这一点，它只是在容器中添加html。

您可以尝试这样的事情

$(document).ready(function(){
   $("#buttonCreateFolder").click(function()
   {
    var name=$("#folderName").val();
    if(name!="")
    {
    	var div="<div class='folder'><span class='fname'>Folder : "+name+"</span> Your content here</div>";
        $(".container").append(div);
        $("#folderName").val("");
    }
   });
});

.folder{
  position:relative;
  background-color:yellow;
  width:300px;
  height:150px;
  margin:20px;
  border:solid 1px #999;
  padding:40px 10px 5px 10px;
  display:inline-table;
}

.fname{
  position:absolute;
  width:100%;
  text-align:center;
  border-bottom:solid 1px black;
  top:0;
  left:0;
  height:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<input type="text" id="folderName" name="folderName" placeholder="Folder Name"> <button id="buttonCreateFolder">
Create Folder
</button>

<div class="container">

</div>

在javascript中创建文件夹

1 个答案: