Add a new custom div on button click

Question

I am making a small web application that allows users to add sticky notes to a page by clicking the add button. The following is the html that makes up a sticky note.

<div class="sticky_note">
    <div class="title">
      <input type="text" name="title" placeholder="My Title"><span class="close">x</span>
    </div>
    <div class="content">
      <textarea name="note" placeholder="Type here..."></textarea>
    </div>
</div>

I am just a bit unsure how to add another sticky note everytime the user clicks add. Any help would be appreciated. Thanks!

Harold Finch · Accepted Answer · 2015-06-21 18:32:56Z

1

You could generate an html element by pressing a button, for example:

var div = document.createElement('div');
div.id = 'window'; //you can assign property to your element.

var div2 = document.createElement('div');
div2.id = 'windowhead';
div.appendChild(div2);
document.body.appendChild(div);

this code append a div into another main container. I hope that this can be help.

answered Jun 21, 2015 at 18:32

Harold Finch

58614 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vinayakj · Accepted Answer · 2015-06-21 19:24:51Z

0

var stickyNote = $('.sticky_note')[0].outerHTML;
$('#addBtn').click(function(){
  $stickyNote = $(stickyNote);
  $stickyNote.appendTo($('.sticky_notes_container'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky_notes_container">
<div class="sticky_note">
    <div class="title">
      <input type="text" name="title" placeholder="My Title"><span class="close">x</span>
    </div>
    <div class="content">
      <textarea name="note" placeholder="Type here..."></textarea>
    </div>
</div>
</div>
<button id=addBtn>Add</button>

edited Jun 21, 2015 at 19:24

answered Jun 21, 2015 at 18:37

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

2 Comments

cfly24 Over a year ago

Thanks for the solution. I was wondering if you could shed any light on why the css styles for the dynamically added element are not displaying. Thanks!

vinayakj Over a year ago

create a small working example with css you are referring and then elaborate on what problem you are facing

Varun · Accepted Answer · 2015-06-21 18:33:37Z

0

Assuming all this is inside a main container ,just keep that var code=<div class="sticky_note">...</div> code in a string and use

$("container").append(code);

answered Jun 21, 2015 at 18:33

Varun

1,9562 gold badges12 silver badges17 bronze badges

Comments

Anirudh Modi · Accepted Answer · 2015-06-21 18:40:12Z

0

You can easily create a new div.By using

document.createElement("div")

You can add text, classes..just look up w3school for more details..

Also i see your requirement, that clicking on button it will create a sticky note..

Element.cloneNode()

Might be helpful for you..where you make a div once with all the design and structure and use it again again..

http://www.w3schools.com/jsref/met_node_clonenode.asp

edited Jun 21, 2015 at 18:40

answered Jun 21, 2015 at 18:32

Anirudh Modi

1,83913 silver badges9 bronze badges

2 Comments

bobthedeveloper Over a year ago

document.createElement('div')

Anirudh Modi Over a year ago

By mistake d was captial didnt noticed

Collectives™ on Stack Overflow

Add a new custom div on button click

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related