2016-12-10 2 views
0

У меня возникла ошибка (повторите попытку, повторите попытку. Обязательно используйте .append(), чтобы добавить свой товар в свой). когда я пытался с $('<div class="item">' + toAdd + '</div>')..append('.list'); Его работала отлично, но я не мог найти решение или причину, почему функция .append() говорит о двух периодах вместо одного. Это будет большой помощью для меня, если кто-нибудь сможет дать мне решение.jQuery .append() function error

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

Нет, я хочу добавить app(). Например Таким образом, я добавляю свой заказ с другим гамбургером: myOrder.append (еще один гамбургер). Или, я могу сказать: я хотел бы взять гамбургер и добавить его в свой заказ: burger.appendTo (myOrder). Примите эту новую вещь и приложите к уже существующей вещи vs возьмите уже существующую вещь и добавьте эту новую вещь –

ответ

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

получил благодарность за быстрый ответ –