преобразование innerhtml javascript в jquery

Question

Я изучаю jQuery, поэтому я прошел через свой старый код, пытаясь изменить все, и до сих пор его было довольно легко, пока я не столкнулся с этим.

У меня есть этот кусок кода яваскрипта

myText.innerHTML += "<li>"+input_text+" "+input_date+" "+input_time+"</li>";} 

работы с этим немного HTML кода

<button onClick='buttonClicked'>Submit!</button> 

, который я предполагал бы преобразовать в

<input type ="button" id ='buttonClicked' value="Submit!"/> 

Я просто убежище» t, похоже, до сих пор получил право на jQuery, и это немного разочаровывает.

Очевидно, что есть нечто большее, чем просто код, который я дал, я просто стараюсь, чтобы все сосредоточились, если вам действительно нужно больше просто спросить, я уже преобразовал остальные js в jQuery. Мой друг сказал, что я должен использовать «append», но до сих пор мне не удалось это понять.

Можете ли вы преобразовать это и связать меня с документацией относительно того, почему это работает? Позвольте мне знать, что это было бы очень полезно для того, чтобы мое понимание этого материала было намного быстрее, спасибо!

редактировать: Был

function buttonClicked() { 
var myText = document.getElementById('myText'); 
var input_text = document.getElementById('input_text').value ; 
var input_date = document.getElementById('input_date').value ;   
var input_time = document.getElementById('input_time').value ; 
myText.innerHTML += "<li>"+input_text+" "+input_date+" "+input_time+"</li>";} 

до сих пор в JQuery является:

$(document).ready(function() { 
var input_text = $('#input_text').val(); 
var input_date = $('#input_date').val(); 
var input_time = $('#input_time').val(); 
$('#buttonClicked').click(function(){ 
    //$('#myText').append(function(){ $("<li> "+input_text+" "+input_date+" "+input_time+" </li>") 
//$('myText').html(); 

}); 


}); 

Я пробовал много, но я не уверен, с чего начать.

Answer 1

Первым шагом является добавление обработчика кликов к вашей кнопке с помощью JQuery. Docs.

$("#buttonClicked").click(function() { 
    //handle click 
}); 

Вы хотите использовать метод append в этой функции, которая будет вызвана обработчиком щелчка. Документы для этого можно найти here.

Answer 2

Если у вас есть что-то вроде этого на вашем HTML:

<input type="button" id="buttonClicked" value="Submit!"> 
<div id="myText></div> 

Вы можете использовать JQuery, как это:

$('#buttonClicked').click(function() { 
    $('#myText').append("<li>"+input_text+" "+input_date+" "+input_time+"</li>"); 
}); 

Answer 3

Добавить обработчик щелчка на кнопке и использовать $.append для вставки содержимого, вы хотите.

Вы можете посмотреть документацию здесь: http://api.jquery.com/append/

$(function(){ 
    $('#buttonClicked').click(function(){ 
     var input_text = $('#input_text').val(); 
     var input_date = $('#input_date').val(); 
     var input_time = $('#input_time').val(); 
     $('#myText').append("<li>"+input_text+" "+input_date+" "+input_time+"</li>"); 
    }); 

});

Answer 4

Другие ответы правильны, но я предлагаю использовать «на», для события щелчка:

$("#buttonClicked").on("click", function(e){ 
    e.preventDefault(); //this, along with return false, will prevent default behavior from button clicks - probably only useful in web applications, but a good convention to start using 
    $('#myText').append("<li>"+input_text+" "+input_date+" "+input_time+"</li>"); // Note that this will continue to append additional li elements with each button click. If that is not desired, you can call $("#myText").empty(); before adding the li element 
    return false; 
});