javascript - 用javascript插入div

Question

我有以下代码，我希望允许我单击一个按钮并向页面添加另一个框，但 inj stread 它只是在每次单击其中一个按钮时重置页面

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

请有人让我知道我做错了什么以及如何实现我想要的。

答案:

只是最终结果的更新

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

我使用了下面的几个答案，这是最终结果，但最终还是走上了 html5 路线。

Answer 1

首先，既然你使用的是 jQuery，如果我是你，我就不会在你的按钮中使用 onclick 属性。相反，添加一个事件监听器，如下所示:

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

或者

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

这两者都会阻止用户的浏览器跟踪链接，但会根据需要执行 JavaScript。

此外，由于您需要根据单击的按钮来执行两个不同的函数，因此您可能应该添加一个类或 id 来区分这两个函数。

您的标记将如下所示:

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

你的 JavaScript 将是:

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