为什么我不能在html中设置span标记的innerhtml?

c7rzv4ha  于 2021-09-13  发布在  Java
关注(0)|答案(3)|浏览(339)

我试图将从ajax调用收到的响应打印到php脚本中。这是我的代码:
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>

我所要做的,就是分开 response 并打印一部分 response (不包括最后一个词)在单独的 <span> 最后一个字在一个单独的 <span> . 但是最后一个字永远不会被打印出来,尽管当我 console.log() 单词,然后它正确地显示。
我重新检查了我的电脑 <span> ID,它们也是正确的。我哪里做错了?

lsmd5eda

lsmd5eda1#

$("#qid").text(str); 重写 qid 用文本传递它。
内容 qid 包括带有 qrtr_id 所以当你重写它的时候,你就破坏了这个跨度。 $("#qrtr_id") 然后没有找到任何元素。
Some random text here :&nbsp; 在另一个跨度和目标中,而不是 qid .

xfb7svmp

xfb7svmp2#

首先,请不要混合使用jquery和香草javascript:)。
其次,主要问题是您使用的是.text(text)方法。这将替换目标元素中的所有内容,因此第二个跨度将不再存在。这将用文本替换innerhtml。
因此,我的建议是使用append方法将最后一个跨距添加到第一个跨距中。

// 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);
cwdobuhd

cwdobuhd3#

如我所见,在for循环中使用<=如下所示。

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

或者,在for循环中使用<arr.length,如下所示。

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

相关问题