为什么从非空元素获取innerHTML会得到空结果？

由 发布于

请查看完整页面中的代码片段的结果

我正在尝试从一组嵌套的HTML元素中获取文本内容，这些元素显然是在运行时由脚本/ API附加的。

但是，碰巧是，即使负责附加样式化引号的脚本/ API在其中包含内容，当尝试使用脚本将其内容设置为另一个div时，也会显示为空白。

为什么会发生这种情况，我该如何实现呢？

我这样做的原因是，我不想使用API​​给出的格式样式。而是我希望以自己的方式设置样式。

html,
body {
  margin: 0;
  padding: 0;
  /*height:100%;
    overflow:hidden;*/
  overflow: hidden;
}

header {
  background-color: black;
  height: 100vh;
  background-size: cover;
  background-position: center;
}


/******* QUOTE *********************************************************/

.center_bottom {
  position: absolute;
  right: 10px;
  bottom: -20px;
}

a {
  pointer-events: none;
  cursor: default;
}

.quote_div2 {
  display: block;
  color: white;
  font-size: 20px;
  font-family: Arial;
  position: absolute;
  left: 10px;
  top: 15px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="1.css">
  <script type="text/javascript" src="https://theysaidso.com/gadgets/v3/theysaidso.js"></script>

</head>

<body>

  <header>
    <!-- DIV1: This below script fetches a Quote & displays it in styled fashion -->
    <div id="quote_div" class="tso_simple_borders center_bottom q-t">
      <script id="sc1">
        TheySaidSo.render({
          qod_category: 'inspire'
        });
        //document.getElementById("quote_div").style.display = "none";
      </script>
    </div>
    
    
    

    <!-- DIV2: This is division where i want to paste the plain text from DIV1-->
    <div class="quote_div2">
      <span id="spn"></span>
    </div>
    
    
    
    
    <!-- In this script, I'm trying to fetch Quote contents and set it onto other div -->
    <script>
      var txt = "This text should be replaced by ONLY TEXT CONTENTS of below quote";
      var qttxt = document.getElementsByClassName("quote_text");
      Array.from(qttxt).forEach((el) => {
        var children = el.childNodes;
        if (el.nodeName.toLowerCase() == 'span') {
          el.style.color = "white";
        }
        for (var j = 0; j < children.length; j++) {
          if (children[j].nodeName.toLowerCase() == 'a') {
            txt = txt + children[j].innerHTML;
          }
        }
      });

      document.getElementById("spn").innerHTML = txt;
    </script>

  </header>

</body>

</html>