Change the inner HTML with another HTML code block of a div and a script

#1
I have been struggling with this so hopefully someone can help! So I am looking to change the inner html of a paragraph to another html element containing a div and script when my frame receives a message from the page code. I have this working only for when the inner html is set to replace with a normal string like this
Mã:
document.getElementById('demo').innerHTML =   "testing" ;
the correct replacement shows up here
Mã:
<p id="demo">testing</p>
but when I try and pass in the other html to replace that section like this:
Mã:
document.getElementById('demo').innerHTML =   
'<div id="tlkio" data-channel="regerhtrh" data-theme="theme--night" style="width:100%;height:400px;"></div><script async src="https://tlk.io/embed.js" type="text/javascript"></script>';
it does not work. I don't think it is a quotation issue because I wrapped the outsides of it with single quotes. not sure what else to try. Below is the full html and I would appreciate any help!
Mã:
<!doctype html>
<html>
<head>

<script type="text/javascript">

function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML =   
  '<div id="tlkio" data-channel="regerhtrh" data-theme="theme--night" style="width:100%;height:400px;"></div><script async src="https://tlk.io/embed.js" type="text/javascript"></script>'
 ;


}
</script>

</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">



  should put html here
</p>
</body>
</html>
 

Admin

Administrator
Thành viên BQT
#2
You may consider swapping the Quotes used:
Mã:
function insertMessage(msg) {
  var myHtml = "<div id='tlkio' data-channel='regerhtrh' data-theme='theme--night' style='width: 100%; height:400px;'></div><script async src='https://tlk.io/embed.js' type='text/javascript'></script>";
  document.getElementById('demo').innerHTML = myHtml;
}
This may add it, yet may not render it. You might consider creating the elements and appending them.
Mã:
function insertMessage(msg) {
  var tlkio = document.createElement("div");
  tlkio.style.width = "100%";
  tlkio.style.width = "400px";
  tlkio.setAttribute('data-channel', 'regerhtrh');
  tlkio.setAttribute('data-theme', 'theme--night');

  var tlkScript = document.createElement("script");
  tlkScript.src = 'https://tlk.io/embed.js';
  tlkScript.type = 'text/javascript';
  tlkScript.async = true;

  document.getElementById('demo').append(tlkio, tlkScript);
}
Based on some research here: load scripts asynchronously, it may be best to append the script to the <head>.

Hope that helps.

Update

Per your fiddle, once updated, it is working as you suggested: https://jsfiddle.net/Twisty/62fdybc0/7/

The following is added to #myDIV element:

Mã:
<div style="width: 100%; height: 400px;" data-channel="regerhtrh" data-theme="theme--night"></div><script src="https://tlk.io/embed.js" type="text/javascript" async="async"></script>
 
Top