Why can't I set the innerHTML of my span tag in HTML?

Question

I am trying to print the response received from my AJAX call to my PHP script. This is my code:

JavaScript:

$.ajax({
    url: 'index_backend.php',
    type: 'POST',
    data: { "input": "id"},
    success: function(response) {

            let str="";
            const arr=response.split(" ");
            for(var i=0; i<arr.length-1; i++){
                str=str.concat(" ",arr[i]);
            }

            //console.log(arr); shows correct output
            //console.log(arr[arr.length-1]); shows correct output

            document.getElementById("qid").style.display="block";
            $("#qid").text(str); //works
            $("#qrtr_id").html(arr[arr.length-1]); //doesn't work
           
                            
    },
    complete: function() {

    }
});

HTML:

<span id="qid" style="display: none;">
    Some random text here :&nbsp;
    <span id="qrtr_id" style="color: crimson;"></span>
</span>

All I am trying to do, is split the response and print a part of the response (excluding the last word) in a separate <span> and the last word in a separate <span>. But the last word never gets printed, although when I console.log() the word, then it shows correctly.

I've re-checked my <span> ids and they are correct too. Where am I going wrong?

Does this answer your question? [How can I change an element's text without changing its child elements?](https://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements) — James, Jul 08 '21 at 15:54
I've reformatted your code to make the html nesting more obvious. — freedomn-m, Jul 08 '21 at 16:10

score 0 · Answer 1 · answered Jul 08 '21 at 15:32

0

$("#qid").text(str); rewrites the content of qid with the text you pass it.

The content of qid includes the span with the qrtr_id so when you rewrite it you destroy that span.

$("#qrtr_id") then doesn't find any element.

Wrap Some random text here :  in another span and target that instead of qid.

answered Jul 08 '21 at 15:32

Quentin

914,110
126
1,211
1,335

I want my `qid` and my `qrtr_id` to be in the same line and have different text colors. Hence my html code is like that, one inside the other. – Jul 08 '21 at 15:36
@Lubji — Well, that won't work, so do what I said instead. – Quentin Jul 08 '21 at 15:37
To be explicit: `your text` then `$("#qid>span:first").text(str)` - will still show them "in the same line" – freedomn-m Jul 08 '21 at 16:11

Ricardo Ferreira · Answer 2 · 2021-07-08T16:34:43.193

0

First of all do not mix jquery and vanilla javascript, please :).

Second, the main problem is that you are using the .text(text) method. This will replace all content inside the target element, so your second span will not exist anymore. This will replace the innerHTML with the text.

So my suggestion is to use the append method to add your last span inside the first one.

// the main span
const $firstSpan = $('#id');

// add the whole text, except the last word into the main span
const $firstSpan.text(arr.slice(0, arr.length-1).join(' '));

// create a span do wrapp the last word
const $lastWord = $('<span>');

// add the last word into the correspondent span
$lastWord.text(arr[arr.length-1]);

// add the last word span into the main span
$($lastWord).appendTo($firstSpan);

edited Jul 08 '21 at 16:34

answered Jul 08 '21 at 16:25

Ricardo Ferreira

595
3
9

Sorry, I have sent before I finish writing the code. – Ricardo Ferreira Jul 08 '21 at 16:31
You only need to recreate the last span. Or you can make the last span a sibling of the first one, instead of a child. – Ricardo Ferreira Jul 08 '21 at 16:36
1

`$lastWord` is already a jQuery object; there's no need to wrap it in `$(...)`. – Heretic Monkey Jul 08 '21 at 17:28

score -3 · Answer 3 · answered Jul 08 '21 at 15:35

-3

As I can see, use <= in for loop as below.

for(var i=0; I <= arr.length-1; i++)

OR, use <arr.length in for loop as below.

for(var i=0; I <= arr.length; i++)

answered Jul 08 '21 at 15:35

Puneet Goel

99
1
9

That isn't the problem, they said they could `console.log` the data they wanted. (It might be *a* problem, but certainly isn't the one being asked about.). Your code is also wrong. You can't change the case of a variable name. – Quentin Jul 08 '21 at 15:38
Explain *why* using `<=` should be used. Also, explain why you're using a different variable (`I`) in the loop... – Heretic Monkey Jul 08 '21 at 15:39

Why can't I set the innerHTML of my span tag in HTML?

3 Answers3