jQuery appended text is invisible

Question

I'm trying to create a couple of buttons above a textarea to insert some HTML code -- a VERY poor-man's HTML editor. I have a couple of INPUT elements, and I'm using jQuery to set a click handler that will call's jQuery's append() or html() or text() functions.

The handler fires, it shows a debug alert(), but the text I'm trying to append doesn't show up in the textarea. When I inspect the textarea in Firebug, I see the text I'm appending as a child of the textarea -- but it's dimmed, as when an element's style is set to display:none. But Firebug's CSS inspector doesn't show any change to the display or visibility properties.

When I set the click handler to 'append()', and then click multiple times, in Firebug I see the text being added over and over again -- but each new chunk is still invisible. If I choose 'Edit HTML' in Firebug and then type some chars next to the appended text, the entire text block -- the text added by jQuery and the stuff I added in Firebug -- suddenly appear.

This also happens if I don't use a click handler, but call my append function using an inline handler like onclick="javascript:insert('bold');"

Anyone have any idea why the appended text is not displayed?

Here's the relevant code:

The HTML:

<input type='button' id='bold' value='B' onclick='javascript:insert("bold")' />

<textarea name='PersonalGreeting' id='PersonalGreeting'>default text</textarea>

The Javascript:

function insert( cmd )  {
    switch ( cmd )  {
        case 'bold':
            $('#PersonalGreeting').append('<b>bold text here</b>');
            break;  
    }
}

Answer 1

I would guess that jQuery is trying to append HTML DOM elements to the textarea.

Try using the val method to get and set the textarea's value, like this:

$('#PersonalGreeting').val($('#PersonalGreeting').val() + '<b>bold text here</b>');

Answer 2

If the main issue is the textarea not being visible, I would try this:

$('#PersonalGreeting').append('<b>bold text here</b>').show();

Might be worth a shot.

edit: In the vain of not trying to reinvent the wheel, I've had success with WYMEditor

Answer 3

The basic problem is that you can't put HTML inside a <textarea>. In fact, you can't append HTML elements to one at all. You could use the .val() method to change the text shown inside, but that won't make it bold. That will just make it have <b> showing as part of the text.

An off-the-shelf WYSIWYG editor like TinyMCE is free and easy to implement. Rather than reinvent the wheel (which is a lot harder than it might look), try an existing wheel out.

Answer 4

You could do this:

 $('#PersonalGreeting').append('[b]bold text here[/b]');

But that won't actually render the text as bold. To be honest I'm not actually sure how to render text as bold inside a textarea, I imainge some js trickery.

Answer 5

SLaks and VoteyDisciple are correct. You're usage of append is faulty as you are perceiving it as a string function.

From http://docs.jquery.com/Manipulation/append

Append content to the inside of every matched element. This operation is the best way to insert elements inside, at the end, of all matched elements. It is similar to doing an appendChild to all the specified elements, adding them into the document.

Reinventing the wheel on this one is likely more headache than its worth unless this is an attempt to create a superior, competing product or for your own experimentation.

Also, I would shy away from use of obtrusive JavaScript as you have shown in your example with onclick='javascript:insert("bold")' embedded in the input element. Instead, you'll have a more elegant solution with something like the following:

HTML

<input type="button" value="B" class="editor-command" >
<input type="button" value="I" class="editor-command" >
<input type="button" value="U" class="editor-command" >

JavaScript (not tested)

$(document).ready(function() {
  var textarea = $('#PersonalGreeting')
  $(".editor-command").each(function(i, node) {
    textarea.val(textarea.val() + '<$>text here</$>'.replace(/\$/g, node.value);
  });
});