将innerhtml javascript转换为jquery

Question

I'm learning jQuery so I've been stepping through my old code trying to change everything over and so far its been pretty easy until I ran into this.

I have this bit of javascript code

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

working with this bit of html code

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

which I assumed I would convert to

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

I just haven't seemed to get the jQuery right for this quite yet and its getting a little frustrating.

Obviously there's more to it than just the code I gave, I'm just trying to keep everyone focused, if you really need more just ask, I've already converted the rest of the js to jQuery though. My friend said I should be using 'append' but, so far I haven't been able to figure it out.

Can you convert this and link me to some documentation as to why it works? Let me know it would be tremendously helpful for bringing my comprehension of this stuff a lot quicker, thank you!

edit: Was

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>";}

so far in jQuery is:

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

});


});

I've tried a lot but I'm not sure where to start.

Answer 1

Assuming you have something like this on your HTML:

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

You can use jQuery like this:

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

Answer 2

The first step is adding a click handler to your button with JQuery. Docs.

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

You'll want to use the append method in that function that's being called by the click handler. The docs for that can be found here .

Answer 3

Add a click handler to your button and use $.append to insert the content that you want.

You can see the documentation here: 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

The other answers are valid, but I suggest using "on", for the click event:

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