converting innerhtml javascript to 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.

Andrés Checa · Accepted Answer · 2015-11-06 17:58:53Z

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

answered Nov 6, 2015 at 17:58

Andrés Checa

614 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brendan Jackson Over a year ago

Ok so I was getting close but, I just wrote it in a way that wouldn't work the I wanted it to

Andrés Checa Over a year ago

You were close, the others answers I think are more complete. You should move var input_text = $('#input_text').val(); and the other variables inside the click event handler, so when you click the button you will get the latest values.

Will · Accepted Answer · 2015-11-06 17:54:48Z

0

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.

answered Nov 6, 2015 at 17:54

Will

7239 silver badges24 bronze badges

Comments

Lucas Souza · Accepted Answer · 2015-11-06 18:02:42Z

0

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

});

answered Nov 6, 2015 at 18:02

Lucas Souza

3711 silver badge6 bronze badges

Comments

Stan Shaw · Accepted Answer · 2015-11-06 18:07:10Z

0

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

answered Nov 6, 2015 at 18:07

Stan Shaw

3,0541 gold badge14 silver badges27 bronze badges

Collectives™ on Stack Overflow

converting innerhtml javascript to jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related