CODEWITHSUNDEEP
javascriptjquery
Paul
Paul

Reputation: 51

JQuery: Append/After difficulties

I have a simple input line and want to append whatever has been entered each time somebody pushes the OK button. Sounds simple so far, still I am unable to get it working HTML:

<p>
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" /> 
<p id="status">Ok</p>
<br>

JQuery:

$(document).ready(function(){
$('#status').on('click', function(){
var input = $('input[name=todo]').val();
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').after('#status');
 });
 });

I also tried my luck with append or appendTo, but both times unsuccessfully. Just in case here is the JSFiddle: http://jsfiddle.net/NRWzE/

Upvotes: 0

Views: 117

Answers (5)

ErikE
ErikE

Reputation: 50211

There are a few things going on, but the big thing is that you need to research more how after, append and appendTo work. Here's the basic syntax difference in the methods that share a name but one has To on the end:

  • Newcontent.appendTo(existingElement) returns newElements.
  • existingElement.append(newContent) returns existingElement.

Additionally, after puts the new element as a sibling of the reference element, whereas append puts the new element as a child. This is an important difference.

So, try this script then:

var taskid = 1;

$('#valueform').on('submit', function(){
    var input = $('#todo').val();
    $('<br><span id="task' + taskid.toString() + '">' + input
       + '</span> - <span id="status' + taskid.toString()
       + '">Ok</span>').appendTo('#status');
    taskid += 1;
    $('#todo').focus().select();
    return false;
});
$('#todo').focus().select();

See a Live Demo at JSFiddle

Here's the supporting HTML:

<form id="valueform">
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<input type="submit" value="OK" id="okbutton">
</form>
<p id="status"></p>

There are some other concerns:

  • I recommend you study which HTML elements are allowed within which HTML elements.
  • Instead of putting a <b> tag on each item, use CSS. Additionally, if there is semantic importance for the bolding, then use <strong> instead. <b> also should probably not take an id because it is a presentation tag, not a content tag. When thinking of presentation vs. semantics, one must consider screen readers or browsers that cannot render bold text--in that case, <strong> will allow them to emphasize the text in another way if needed.
  • Get familiar with the jQuery documentation. Careful reading of what exactly each function does, the object it works on, the parameters expected, and the values returned will enable you to get past barriers in the future without having to ask here.
  • It looked to me like you wanted to put the new content inside of the #status paragraph, not after it. So I wrote my script that way. If you put it after the way you wrote it, then the most recent status will be on top--but then you have non block-level content (starting with your <br>) outside of any block-level element. So you should be appending <p> elements, or you should put your content inside the existing <p>.

Note: I added a form and made the button type submit instead of button to get easy Enter-key handling. It doesn't have to be this way.

Upvotes: 1

hyunkeln
hyunkeln

Reputation: 419

.after() works, but you need to set it up correctly, according to documentation it should be:

.after( content [, content ] )

So the right way is:

$("#status").after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');

Upvotes: 2

zzzzBov
zzzzBov

Reputation: 179046

It looks like you meant to use:

$('#status').after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');

(see after docs)

or, alternatively insertAfter:

$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').insertAfter('#status');

Upvotes: 2

Mohamed AbdElRazek
Mohamed AbdElRazek

Reputation: 1684

Try use jquery insertAfter:

$(document).ready(function () {
    $('#status').on('click', function () {
        var input = $('input[name=todo]').val();
        $('<br><b id="taskz">' + input + '</b> - <b id="statusz">Ok</b>').insertAfter('#status');
    });
});

Upvotes: 2

pietroalbini
pietroalbini

Reputation: 336

Try this:

$('#status').click(function(){
    var input = $('input[name=todo]').val();
    $('#status').append('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
});

Upvotes: 1

Related Questions