Append text to elements using jQuery


  • 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.

0 comments:

Post a Comment