2016-12-10 15 views
0

私はエラーに直面しています(おっと、もう一度やり直してください).append()を使用してあなたのアイテムを追加してください。私は$('<div class="item">' + toAdd + '</div>')..append('.list');で試してみましたが、うまく動作しましたが、解決策や理由を見つけることができませんでした。誰かが私に解決策を与えることができれば、大きな助けになるだろう。このようjQuery .append()関数のエラー

$(document).ready(function(){ 
 
    $('#button').click(function(){ 
 
     var toAdd = $('input[name=checkListItem]').val(); 
 
     $('<div class="item">' + toAdd + '</div>').append('.list') 
 

 
    }); 
 
    
 
});
h2 { 
 
    font-family:arial; 
 
} 
 

 
form { 
 
    display: inline-block; 
 
} 
 

 
#button{ 
 
    display: inline-block; 
 
    height:20px; 
 
\t width:70px; 
 
\t background-color:#cc0000; 
 
\t font-family:arial; 
 
\t font-weight:bold; 
 
\t color:#ffffff; 
 
\t border-radius: 5px; 
 
\t text-align:center; 
 
\t margin-top:2px; 
 
} 
 

 
.list { 
 
\t font-family:garamond; 
 
\t color:#cc0000; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    \t <title>To Do</title> 
 
     <link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
 
     <script type="text/javascript" src="script.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <h2>To Do</h2> 
 
\t \t <form name="checkListForm"> 
 
\t \t \t <input type="text" name="checkListItem"/> 
 
\t \t </form> 
 
\t \t <div id="button">Add!</div> 
 
\t \t <br/> 
 
\t \t <div class="list"></div> 
 
\t </body> 
 
</html>

+1

あなたは 'appendTo'を使用することを意味しましたか? – 4castle

+0

いいえ、私は 'append()をしていません。たとえば 私は別のハンバーガーで注文を追加します: myOrder.append(別のハンバーガー)。 または、私は言うことがあります:私はハンバーガーを取って私の注文にそれを追加したいと思います: burger.appendTo(myOrder)。 は、この新しいものを取ると、既存のものを取り、追加 対appendTo既存のもの はこの新しいもの –

答えて

1

$(document).ready(function(){ 
 
    $('#button').click(function(){ 
 

 
     var toAdd = $('input[name=checkListItem]').val(); 
 
    
 
     $('div.list').append('<div class="item">' + toAdd + '</div>') 
 

 
    }); 
 
    
 
});
h2 { 
 
    font-family:arial; 
 
} 
 

 
form { 
 
    display: inline-block; 
 
} 
 

 
#button{ 
 
    display: inline-block; 
 
    height:20px; 
 
\t width:70px; 
 
\t background-color:#cc0000; 
 
\t font-family:arial; 
 
\t font-weight:bold; 
 
\t color:#ffffff; 
 
\t border-radius: 5px; 
 
\t text-align:center; 
 
\t margin-top:2px; 
 
} 
 

 
.list { 
 
\t font-family:garamond; 
 
\t color:#cc0000; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    \t <title>To Do</title> 
 
     <link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
 
     <script type="text/javascript" src="script.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <h2>To Do</h2> 
 
\t \t <form name="checkListForm"> 
 
\t \t \t <input type="text" name="checkListItem"/> 
 
\t \t </form> 
 
\t \t <div id="button">Add!</div> 
 
\t \t <br/> 
 
\t \t <div class="list"></div> 
 
\t </body> 
 
</html>

+0

があなたの速い応答のための感謝を得た –

1

$(document).ready(function(){ 
 
    $('#button').click(function(){ 
 
     var toAdd = $('input[name=checkListItem]').val(); 
 
     $('<div />',{html:toAdd,class:"item"}).appendTo('.list') 
 

 
    }); 
 
    
 
});
h2 { 
 
    font-family:arial; 
 
} 
 

 
form { 
 
    display: inline-block; 
 
} 
 

 
#button{ 
 
    display: inline-block; 
 
    height:20px; 
 
\t width:70px; 
 
\t background-color:#cc0000; 
 
\t font-family:arial; 
 
\t font-weight:bold; 
 
\t color:#ffffff; 
 
\t border-radius: 5px; 
 
\t text-align:center; 
 
\t margin-top:2px; 
 
} 
 

 
.list { 
 
\t font-family:garamond; 
 
\t color:#cc0000; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    \t <title>To Do</title> 
 
     <link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
 
     <script type="text/javascript" src="script.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <h2>To Do</h2> 
 
\t \t <form name="checkListForm"> 
 
\t \t \t <input type="text" name="checkListItem"/> 
 
\t \t </form> 
 
\t \t <div id="button">Add!</div> 
 
\t \t <br/> 
 
\t \t <div class="list"></div> 
 
\t </body> 
 
</html>

+0

は、あなたの速い応答に感謝しました –