How to Add or Append text to a DIV element using jQuery - .appendTo() and .append() method example

jquery

← PrevNext →

I have previously shared an article explaining how to 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. 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.

By the way, you can use plain old JavaScript to add or append text a DIV element.

Add text using jQuery .appendTo() Method

Syntax:

$(content).appendTo(selector) // The content to append (or add) to an element.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <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 dynamically added text using jQuery .append() Method

Syntax:

append(param1, param2, ...) // The parameters are a set of nodes.

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().

← PreviousNext →