Add text to specific DIV

Question

How to append text to a specific <div> if i know the ID of the <div>?
For example, here's my code:

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

<script>
  function appendDIV(idDIV, txt) {
    $("#" + idDIV).append('<p>' + txt + '</p>');
  }
  appendDIV("content-01", "some text");
</script>

<div id="content-01" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>

Function accepts the ID of the <div> and some text, but nothing happens.
What's going wrong?

How did you call `appendDIV`? Did your container exist when your function was called, if not it won't work. — Patrick Evans, Jun 15 '18 at 17:10
And did it exist when you called the function? You can check by testing `$("#"+idDIV).length` if it is `0` then it doesn't exist yet. Also add a [mcve] as that will help diagnose problems better. As it works just fine here http://jsfiddle.net/tpxqL83k/ — Patrick Evans, Jun 15 '18 at 17:12
It might help to make a [working example](https://stackoverflow.com/help/mcve) to demonstrate the problem. It seems that the issue depends on where you're loading your JavaScript: for example, in the `` versus at the end of the ``. See [Do jQuery scripts still need $(document).ready if they are loaded after all of the page HTML?](https://stackoverflow.com/questions/10392803/do-jquery-scripts-still-need-document-ready-if-they-are-loaded-after-all-of-t) and [Is $(document).ready necessary?](https://stackoverflow.com/questions/4643990/is-document-ready-necessary), etc. — showdev, Jun 15 '18 at 17:17
Yes, you are right. thank you very much. The DIV didn't exist in the moment when the text should be added. I'm novice with javascript so don't mind. — Josef, Jun 15 '18 at 17:18
@Josef - added answer with demo that will help you and go through jquery documentation once — Pranay Rana, Jun 15 '18 at 17:28
@Josef -is that worked for you , let me kno if need some thing els e — Pranay Rana, Jun 15 '18 at 18:10
@PranayRana Yes, works perfect. I have just one more question. Suppose that inside div are some the paragraph elements
. Each element has different ID like
and so on. How to update text on specificelement? Text is changing every few seconds and i want update only specific
element inside specific div. How to do that? — Josef, Jun 15 '18 at 18:17
@PranayRana Well, it's working but I would like to extend my function appendDIV() to accept 3 parameters. The first one is the ID of div, the second one is is the ID of paragraph element and the third one is the text that should appear in paragraph element which is inside div. For example: appendDIV("content-01", "paragraph-01", "some text inside paragraph"); — Josef, Jun 15 '18 at 18:47
@Josef - its easy now you should use code given at jsfiddle and i am going offline now.. if you can upvote/accept if helped you or anything needed please do comment will take look tomorrow — Pranay Rana, Jun 15 '18 at 18:49

Pranay Rana · Answer 1 · 2018-06-15T18:23:55.823

code for getting each p in side div you should do like this

Working

// Shorthand for $( document ).ready()
$(function() {
    appendDIV("content-01", "some text");

    //get all p element and go through each 
    $('#content-01  > p').each(function( index ) {
      console.log( index + ": " + $( this ).text() );
      console.log( "id of element" +  $(this).attr('id'));
     });
});

  function appendDIV(idDIV, txt) {
    $("#" + idDIV).append('<p>' + txt + '</p>');
  }

Working Demo

you should allows to load DOM first before doing any manipulation , so for that you should write you code in document.ready method provided in jquery, which get called when DOM is ready

// Shorthand for $( document ).ready()
$(function() {
    appendDIV("content-01", "some text");
});

add code as above. that will do . Read here : $( document ).ready()

score 0 · Answer 2 · answered Jun 15 '18 at 17:37

You might also consider a custom trigger, passing values, for example if you want a click event on the DIV, then insert some stuff:

$('body').on('appenddiv', function(event, idDIV, txt) {
  $("#" + idDIV).append('<p>' + txt + '</p>');
});

// some where later in code:
$(".mydiv-group").on('click', function() {
  let myid = $(this).attr('id');
  let mytext = myid + ": some text";
  $('body').trigger('appenddiv', [myid, mytext]);
});

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

<div class="mydiv-group" id="content-01" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>
<div class="mydiv-group" id="content-02" style="float: left; width: 150px; height: 150px; border: 2px solid red;"></div>

Add text to specific DIV

2 Answers2