• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Use append() to add text/html to an element with jQuery

Use append() to add text/html to an element with jQuery

jQuery’s function append() can be used to add text or html to an element. It’s very easy to use and this post shows some example code and has a working example where you can type in some text that will be appended to a div.

The following is the HTML for the example:

<div id="example">
    Example div
</div>

It’s easy to append text into this div using append() as shown below. It will append the text directly before the closing </div> tag. This example would add "this text was appended" to the above div:

$('#example').append("this text was appended");

And here’s a working example. Type some text into the textarea, click the button and it will be added to the example div. The example below has a grey border around it to show where the div is. The text in the textarea can also contain html.

Example div

The above example will not work if you are reading this in a feed reader. Please click through to view this in a web browser if this is the case.

The full HTML and Javascript for the above working example is as follows:

<div id="example" style="border: 1px solid rgb(204, 204, 204); margin: 5px 0pt; padding: 5px;">Example div</div>
<form>
    <div><textarea class="example-default-value" id="example-textarea" style="width: 400px; height: 50px;">Type some text in here to be appended</textarea></div>
    <div><input type="button" value="Append" onclick="example_append()" /></div>
</form>
<script language="javascript">
$('.example-default-value').each(function() {
    var default_value = this.value;
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            this.value = default_value;
        }
    });
});
function example_append() {
    $('#example').append($('#example-textarea').val());
}
</script>

The .example-default-value part is explained in an earlier post about how to change the default text value on focus with jQuery.

Check Out These Related posts:

  1. Changing the default text value on focus with jQuery
  2. Dynamically get and set an elements content with jQuery
  3. jQuery: show plain text in a password field and then make it a regular password field on focus
  4. jQuery: Mouse co-ordinates within the element when mouseover or click an element

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap