將innerhtml javascript轉換爲jquery

我正在學習jQuery，所以我一直在嘗試通過舊代碼嘗試更改所有內容，直到遇到此問題爲止它非常簡單。將innerhtml javascript轉換爲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!"/>

我只是避風港」這種工作位t看起來很適合這個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(); 

}); 


});

我已經嘗試了很多，但我不知道從哪裏開始。

來源

2015-11-06 Brendan Jackson

第一步是使用JQuery爲您的按鈕添加點擊處理程序。 Docs.

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

你想使用append方法多數民衆贊成由點擊處理程序調用該函數。該文檔可以找到here。

來源

2015-11-06 17:54:48

假設你有你的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>"); 
});

來源

2015-11-06 17:58:53

好了，所以我是越來越接近，但，我只是寫它的方式是行不通的我想要它 –

你很近，其他答案我認爲更完整。你應該移動'var input_text = $（'＃input_text'）。val（）;'和click事件處理程序中的其他變量，所以當你點擊按鈕時，你會得到最新的值。 –

添加一個單擊處理程序到您的按鈕，並使用$.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>"); 
    });

}）;

來源

2015-11-06 18:02:42

其他的答案是正確的，但是我建議用「上」，單擊事件：

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

來源

2015-11-06 18:07:10

將innerhtml javascript轉換爲jquery

回答

相關問題