inserting divs with javascript

i have the following code that i was hoping would allow me to click a button and add another box to the page but inj stread it just resets the page every time i click one of the buttons

<style>
    div.box 
    { 
        width: 50px; 
        height: 50px; 
        background-image: url("Images/smallBox.jpg"); 
    }

    div.largeBox 
    { 
        width: 100px; 
        height: 100px; 
        background-image: url("Images/largeBox.jpg");
    }
</style>
<script type="text/javascript">
    $(function () {
        setupDragging();
    });
    function setupDragging() {
        $(".box").draggable({ snap: 开发者_运维百科true });
        $(".largeBox").draggable({ snap: true });
    }
    function addSmallBox() {
        var boxArea = document.getElementById('boxArea');
        var newBox = document.createElement('div');
        newBox.setAttribute('class', 'box');
        boxArea.appendChild(newBox);
        setupDragging();
    }
    function addLargeBox() {
        var boxArea = document.getElementById('boxArea');
        var newBox = document.createElement('div');
        newBox.setAttribute('class', 'largeBox');
        boxArea.appendChild(newBox);
        setupDragging();
    }
</script>
<form>
<button onclick="addSmallBox();">small box</button>
<button onclick="addLargeBox();">large box</button>
</form>

<div id="boxArea">
</div>

please can somebody let me know what i am doing wrong and how i can achieve what i want.

ANSWER:

just an update on the final result

    <style>
    div.box 
    { 
        width: 50px;
        height: 50px;
        background-image: url("../Images/smallBox.jpg");
        position: absolute;
    }

    div.largeBox 
    { 
        width: 100px;
        height: 100px;
        background-image: url("../Images/largeBox.jpg");
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(function () {
        setupDragging();
        $('.addBox').click(function(e){
        if($(this).hasClass('smallBox')) addSmallBox();
        else if($(this).hasClass('largeBox')) addLargeBox();
        e.preventDefault();
        })
    });
    function setupDragging() {
        $(".box").draggable({ snap: true });
        $(".largeBox").draggable({ snap: true });
    }
    function addSmallBox() {
        $('<div>', { class: 'box' }).appendTo('#boxArea')
        setupDragging();
    }
    function addLargeBox() {
        $('<div>', { class: 'largeBox' }).appendTo('#boxArea')
        setupDragging();
    }
</script>
<form>
<button class='addBox smallBox'>small box</button>
<button class='addBox largeBox'>large box</button>
</form>

<div id="boxArea">
</div>

i made use of several of the answers below and this was the final result but went down the html5 route in the end.

First of all, since you are using jQuery, if I were you, I would not use the onclick attribute in your button. Instead, add an event listener like so:

$('button').click(function(){
  addLargeBox();
  return false;
});

OR

$('button').click(function(e){
  addLargeBox();
  e.preventDefault();
});

Both of which will prevent the user's browser from following the link but will execute the JavaScript as you want.

Also, since you require two different functions to be executed depending on which button is clicked, you should probably add a class or id to differentiate the two.

Your markup would then look like this:

<button class="add-box">small box</button>
<button class="add-box large-box">large box</button>

And your JavaScript would be:

$('.add-box').click(function(){
  if ($(this).hasClass('large-box')) addLargeBox();
  else addSmallBox();
  return false;
});

The button tag you are using is a HTML5 version of a form submit button which causes a page refresh. Change the buttons to:

<input type="button" onclick="addSmallBox();" value="small box" />

Or put return false at the bottom of each of your javascript functions.

Couple of things:

1. Always separate JS from code (that means lose the onclick attributes and bind them in javascript instead.)
2. The form is still being submitted; have your functions return false/preventDefault (jQuery) to avoid this.

Some hints:

1. Since you're already using jQuery, why not build html elements with it? ($('<div>',{class:'box'}).appendTo('#boxArea') for instance)

You have to return false from the click event to prevent the default browser behavior of following the link.

I'm not sure why just by glancing at the code, but perhaps you could try retrieving the boxArea.InnerHTML, appending the appropriate HTML string to it, and setting the boxArea.InnerHTML to the result.

Something like:

boxArea.InnerHTML = boxArea.InnerHTML + "<div class='largeBox'></div>";