CODEWITHSUNDEEP
javascriptjqueryhtml
nick_green
nick_green

Reputation: 1664

folder creation in javascript

How to create folder with specific name in javascript? I don't want to create folder in PC, but just create HTML's div with specific content inside. The name should be entered when I click "create new folder" and after I hit enter div appears just below "create new folder" section. I don't want to hard code all elements and so on, so maybe there is an easier way to do that?

I want to create something like this, but appending this code in javaScript would be nonsense

<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>

Upvotes: 0

Views: 482

Answers (1)

Alexis
Alexis

Reputation: 5831

There's multiple method to do that, it's just an append of html in a container.

You can try something like this

$(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>

Upvotes: 1

Related Questions