Append text to elements using jQuery

Home » JQuery » jQuery Interesting codes » Append text to elements using jQuery

Append text to elements using jQuery

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Interesting codes

jQuery makes it very easy to append text to elements already having text.
jQuery provides append() method which appends text to elements.

Watch Live Demo

Example :

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#apply').click(function () {
            $('#target').append("powered by KK.")
        });
    });
</script>
</head>
<body>
<p id="target">This is 20Fingers2Brains. </p>
<button id="apply">Click ME!</button>
<button  onclick="location.reload()">Reset</button>
</body>
</html>

Demo :

In the above example, we have append text to the paragraph element which already has some text in it. We can also render html elements using append method.

Example 2 :

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#apply').click(function () {
            $('#target').append("<b>powered by KK.</b>")
        });
    });
</script>
</head>
<body>
<p id="target">This is 20Fingers2Brains. </p>
<button id="apply">Click ME!</button>
<button  onclick="location.reload()">Reset</button>
</body>
</html>

Demo :

In the above example, we are appending text to paragraph element with bold tags.