在 javascript function 中构建 DOM 元素时不会生成 HTML

Question

I am retrieving a URL parameter with JavaScript that I pass to PHP using AJAX to query a database that returns a string. I am retrieving a URL parameter with JavaScript that I pass to PHP using AJAX to query a database that returns a string.

On AJAX success, I use a function that calls another function where with a for loop I generate my HTML strings that I push to an array. On AJAX success, I use a function that calls another function where with a for loop I generate my HTML strings that I push to an array.

Then I assign it to the DOM elements innerHTML property but no HTML is being generated.然后我将它分配给 DOM 元素的 innerHTML 属性，但没有生成 HTML。

I tried a console.log inside the function to see if I actually get the string from the database, which I do.我在 function 中尝试了一个 console.log，看看我是否真的从数据库中获取了字符串，我这样做了。

What am I doing wrong?我究竟做错了什么？

Here is my code这是我的代码

<html>
    <head>
    <script src=http://localhost:81/jquery-3.6.0.min.js></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:81/style.css">
</head>
<body>
<div class="container">
</div>
<script type="application/javascript">
function query_string(variable)
{
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}
//Getting the parameter-
v = query_string('v');
console.log(v);

//////////////////////////////////////////
var transcript_from_db = {};

function getTranscript(){
    $.ajax(
    {
        type:       "POST",
        dataType:   "text",
        url:        "query2.php",
        data:       "v="+v,
        success:    function(response){
                        transcript_from_db = response;
                        onAjaxSuccess();
                    },

    }
);
};
getTranscript();
function onAjaxSuccess(){
    var thestring = transcript_from_db;
    console.log(thestring);
    var chats=[];
 for (var chat in thestring.data){
  var str='';
  thestring.data[chat].forEach(ch=>str+='<div class="msg"><div class="'+ch.type+'"><div class="txt"><span class="name">'+ch.pop_name+'</span><span class="timestamp">'+ch.timestamp+'</span><span class="message">'+ch.msg+'</span></div></div></div>')
  chats.push(str)
 }
 document.getElementsByClassName('container')[0].innerHTML=chats.join('<div>');
}
/////////////////////////////////////////////////////
</script>
</body>
</html>

If I assign a test string to a variable outside a function and also do the for loop outside a function it works fine.如果我将测试字符串分配给 function 之外的变量，并且还在 function 之外执行 for 循环，则它可以正常工作。

Like this:像这样：

thestring = {
  data: {
    chat: [{
  msg: "Hello there",
  pop_name: "Customer",
  timestamp: "17:05 PM",
  type: "bubble"
}, {
  msg: "Hi John! How can I help you?",
  pop_name: "Dialogflow",
  timestamp: "17:05 PM",
  type: "bubble alt"
}, {
  msg: "My dishwasher is broken!",
  pop_name: "Customer",
  timestamp: "17:06 PM",
  type: "bubble"
}, {
  msg: "Sorry to hear that but maybe I can help you!",
  pop_name: "Dialogflow",
  timestamp: "17:06 PM",
  type: "bubble alt"
}, {
  msg: "Can you tell me what model number is your diswhaser?",
  pop_name: "Dialogflow",
  timestamp: "17:06 PM",
  type: "bubble alt"
}]
  }
}  
var chats=[];
 for (var chat in thestring.data){
  var str='';
  thestring.data[chat].forEach(ch=>str+='<div class="msg"><div class="'+ch.type+'"><div class="txt"><span class="name">'+ch.pop_name+'</span><span class="timestamp">'+ch.timestamp+'</span><span class="message">'+ch.msg+'</span></div></div></div>')
  chats.push(str)
  console.log(chats);
 }
 document.getElementsByClassName('container')[0].innerHTML=chats.join('<div>');

This is the result of that:这是这样做的结果：

Answer 1

I finally saved the object as a valid JSON string in the database and then, once retrieved, I used JSON parse to assign it to an object. I finally saved the object as a valid JSON string in the database and then, once retrieved, I used JSON parse to assign it to an object.

This fixed the problem.这解决了问题。

在 javascript function 中构建 DOM 元素时不会生成 HTML

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-03-16 13:07:31

在 javascript function 中构建 DOM 元素时不会生成 HTML

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-03-16 13:07:31

解决方案1
0 已采纳 2021-03-16 13:07:31