How to add text ao a DIV using jQuery .appendTo() and .append() Method

← PrevNext →

I have shared an article before that explained how easily we can add and remove HTML elements dynamically using jQuery. It covered a very important and useful feature about adding and removing HTML elements dynamically on a web page. However, many of my readers have asked me a question about how to add text to an existing element, such as a DIV, dynamically using jQuery. This article is the answer to those questions.

Here I am going to focus on adding text to elements. There a two seperate jQuery methods to accomplish this. The first method is .appendTo() and second is .append(). The result you'll get using both the methods are similar, however its usage is slightly different from each other. Let's see these methods in action.

Add text using jQuery .appendTo() Method

<html>
<head>
    <title>Add Text to DIV using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <p>Click the button to add text to a DIV!</p>

    <div id="myProfile">
        <input type="button" id="btAdd" value="Add Text" />
    </div> 
</body>

<script>
    $(document).ready(function () {
        $('#btAdd').click(function () {
            AddText();
        });

        function AddText() {
            var rndValue;
            // GENERATE A RANDOM NUMBER (BETWEEN 1 AND 50) FOR EVERY BUTTON CLICK.
            rndValue = Math.floor((Math.random() * 50));

            // NOW ADD THE VALUE (RANDOM NUMBER) TO THE DIV ELEMENT.
            $('<p>' + rndValue + '</p>').appendTo('#myProfile');
        }
    });
</script>
</html>
Try it
The jQuery .appendTo() method will add or append a text or any value to an element. In the above script, I have defined the text before the method, followed by adding the values to a DIV element named myProfile.

Get the Dynamically Added Text using jQuery .append() Method

Now obviously, you want to retrieve (or read) the values that you just appended to the <div> element. All we need to do is iterate or loop through the newly created <div> element and get the values. To demonstrate this, I am adding another <input> element of type submit on the web page. Once retrieved, we will use jQuery .append() method to add the values to a <p> (paragraph) element.

The Markup

I am extending the above example.

<input type="submit" id="btSubmit" value="Submit" />
<p id="displayResult"></p>

Add the markup elements to the web page.

The Script
$('#btSubmit').click(function () {
    $('#displayResult').html('');

    var pro = '';
    // Iterate through the DIV and read its contents.
    $('#myProfile').each(function () {
        pro += $(this).text();
    });
    $('#displayResult').append(pro);
});

Simply add the above script inside the $(document).ready(function (), after the AddText() function (see the first example above).

Conclusion

Simple isn’t it. All I wanted to show here is how to add text to pre-defined or dynamically created elements on a web page. I am sure this article will help the beginners in particular, as it also covered two important jQuery methods with few similarities, however different usages and those are, .appendTo() and .append().

Thanks for reading .

← PreviousNext →


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner