Add Text to a DIV Element 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 visitors 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 we are going to focus on adding text to elements. We can use jQuery .appendTo() method to add any text to an element on a web page. In addition, I’ll show you the use of another useful jQuery method called .append(). The result you get using both the methods are similar, however its usage is little different from each other. Let’s see the 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 the DIV 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> 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 dynamic) 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