將innerhtml javascript轉換為jquery

Question

我正在學習jQuery，所以我一直在逐步瀏覽舊代碼，嘗試更改所有內容，到目前為止，這很容易，直到遇到此問題為止。

我有這段JavaScript代碼

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

使用這段HTML代碼

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

我以為我會轉換成

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

我似乎還沒有完全正確地使用jQuery，並且它有點令人沮喪。

顯然，除了我提供的代碼之外，還有更多其他功能，我只是想讓所有人都專注於它，如果您真的需要更多，請問一下，我已經將其余的js轉換為jQuery。 我的朋友說我應該使用“附加”，但到目前為止，我還沒有弄清楚。

您可以將其轉換為我，然后將其鏈接至一些文檔以了解其工作原理嗎？ 讓我知道，這對加快我對這些東西的理解會非常有幫助，謝謝！

編輯：是

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

假設您在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 2

第一步是使用JQuery將單擊處理程序添加到您的按鈕。 文件。

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

您需要在點擊處理程序正在調用的函數中使用append方法。 可以在此處找到該文檔。

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

其他答案是有效的，但我建議對點擊事件使用“ on”：

$("#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;
});