how do I reference the text part of a div HTML

Question

I have the following div:

<body>
    <div id="div0" style="margin-top:5%;text-align:center">
        One response will appear here 
    </div>
</body>

I have an array within script tags and would simply like to put the value of array[0] into the div, to replace where it says "One response will appear here." I am a bit confused as to what attribute of the div refers to this text - it is not innerHTML or .text or .textContent. Using any of these throws the error:

"Uncaught TypeError: Cannot set property 'innerHTML' of null"

EDIT:

This is where I was calling .innerhtml from

$array=[]
$(document).ready(function(){
    $("#button0").click(function(){
        $.get("url/here",$("#form0").serialize(), function(response){
            $.each(JSON.parse(response), function(index){
                $array.push(JSON.parse(response)[index])                    
            });
            $("#div0").html($array[0]);
            $("#div1").text($array[2]);
            document.getElementById("#div2").innerHTML = $array[4];
        });
    });
});

.html and .text work nicely so thank you all for answering quickly. .innerHTML does not work and I am curious as to why this is?

Similar questions: HTML/Javascript change div content

Have you tried to select the element using `document.getElementById('div0')` ? — Filipe, Jan 15 '16 at 16:49
How about showing us **how** you tried to use any of the three? — Shomz, Jan 15 '16 at 16:49
That error suggests your selector might be off, could you post the relevant javascript? — Jesse Kernaghan, Jan 15 '16 at 16:49
The idea here is to provide the code that causes the problem...so people can help you sort out why and help fix it — charlietfl, Jan 15 '16 at 16:54

score 3 · Accepted Answer · answered Jan 15 '16 at 16:49

3

if you are using jquery you can set the html of the div with:

$(document).ready(function(){
    $("#div0").html(array[0]);
}

answered Jan 15 '16 at 16:49

JParkinson1991

1,256
1
7
17

Shomz · Answer 2 · 2016-01-15T17:03:46.680

2

You should show what you tried. Anyway, this works:

document.getElementById('div0').innerHTML = array[0];

If you don't need HTML, you can use textContent the same way:

document.getElementById('div0').textContent = array[0];

Judging by the error you received, seems like your selector was wrong (or not available at the time the code runs). Again, it would be much easier if you've shown how are you trying to do it.

Live example:

var array = ['Hey, this works!'];
document.getElementById('div0').innerHTML = array[0];

<div id="div0" style="margin-top:5%;text-align:center">One response will appear here </div>

edited Jan 15 '16 at 17:03

answered Jan 15 '16 at 16:50

Shomz

37,421
4
57
85

1

He specified jquery. – Pierre Emmanuel Lallemant Jan 15 '16 at 16:51
2

@PierreEmmanuelLallemant OP wouldn't get that error using jQuery – charlietfl Jan 15 '16 at 16:52
1

@PierreEmmanuelLallemant Using vannila JS is faster than jQuery, especially in this trivial case. Using jQuery where you can go with vannila JS is just stupid. – Radek Pech Jan 15 '16 at 16:55
@RadekPech while that may be true, that dont answer the question. The question was specifically how to do it in jQuery. Really, alternatives should only be suggested if the poster asks for alternatives. – Korgrue Jan 15 '16 at 16:56
@PierreEmmanuelLallemant, read the two comments above. Also, OP said he tried using attributes to access the content which is, again, vanilla JS, because jQuery uses methods. – Shomz Jan 15 '16 at 16:56
2

@Korgrue, I didn't see jQuery mentioned **anywhere** in the question... only after the JS tag... And *please* don't consider JS an alternative to jQuery, makes me really sad. – Shomz Jan 15 '16 at 16:57
@Shomz It was. Poster edited his question. He just edited it again to include the jQuery sample code he is trying to use. I was not trying to be crass, honestly I wasn't. Just mentioned it to give you the chance to update your solution using jQuery. I'm not saying your solution is wrong (it works just fine) - just that OP wanted it in jQuery. – Korgrue Jan 15 '16 at 17:17
Didn't see it was originally there, when I answered it was like it was just before he made that last edit - seemed all vanilla JS (the error, the attributes). All cool, no worries. :) @Korgrue – Shomz Jan 15 '16 at 17:28

score 1 · Answer 3 · answered Jan 15 '16 at 17:05

1

$(document).ready(function(){
$("#div0").html(array[0]);
// or

$("#div0").text(array[0]);

}

You can use html() or text() function

answered Jan 15 '16 at 17:05

Jobelle

2,717
1
15
26

score 0 · Answer 4 · answered Jan 15 '16 at 16:51

Since you are just seeking to update the text, you dont need to use innerHTML. Just use jQuerys text function.

HTML

<body>
    <div id="div0" style="margin-top:5%;text-align:center">One response will appear here </div>
</body>

jQuery

$("#div0").text(yourarray[index]);

Make sure that the text is stored as strings in your array.

Michael Armes · Answer 5 · 2016-01-15T17:09:35.867

-1

You could do something like this with jQuery:

   $(function() {
     var testArray = ["1", "2"  ];
     var length = testArray.length;

     for (var i = 0; i < length; i++) {
     var v = testArray[i];
     $("#div" + i).text(v);
     }
   });

edited Jan 15 '16 at 17:09

answered Jan 15 '16 at 16:54

Michael Armes

1,056
2
17
31

how do I reference the text part of a div HTML

5 Answers5