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

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
document.getElementById('demo').innerHTML =   "testing" ;
the correct replacement shows up here
<p id="demo">testing</p>
but when I try and pass in the other html to replace that section like this:
document.getElementById('demo').innerHTML =   
'<div id="tlkio" data-channel="regerhtrh" data-theme="theme--night" style="width:100%;height:400px;"></div><script async src="" 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!
<!doctype html>

<script type="text/javascript">

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

// 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="" type="text/javascript"></script>'



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

  should put html here


Thành viên BQT
You may consider swapping the Quotes used:
function insertMessage(msg) {
  var myHtml = "<div id='tlkio' data-channel='regerhtrh' data-theme='theme--night' style='width: 100%; height:400px;'></div><script async src='' 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.
function insertMessage(msg) {
  var tlkio = document.createElement("div"); = "100%"; = "400px";
  tlkio.setAttribute('data-channel', 'regerhtrh');
  tlkio.setAttribute('data-theme', 'theme--night');

  var tlkScript = document.createElement("script");
  tlkScript.src = '';
  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.


Per your fiddle, once updated, it is working as you suggested:

The following is added to #myDIV element:

<div style="width: 100%; height: 400px;" data-channel="regerhtrh" data-theme="theme--night"></div><script src="" type="text/javascript" async="async"></script>

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.