Question

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

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

请注意，quote_text和children[j]是元素附加在通过API /脚本运行时。因此，它不是我直接控制的。（我使用 inspect元素找到了它们），所以我正在尝试更改他们使用javascript，因为它们不在我的控制范围内。

但是，碰巧即使负责添加样式报价的脚本/ 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>
    <!-- PART1 -->
    <!-- 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>
    
    
    
    <!-- PART2 -->
    <!-- DIV2: This is division where i want to paste the plain text from DIV1-->
    <div class="quote_div2">
      <span id="spn"></span>
    </div>
    
    
    
    <!-- PART3 -->
    <!-- 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>

**

对于那些对quote_text感到困惑的人，它附加在后端（请检查下面的图片以供参考）：

**

问题似乎出在脚本的执行顺序上。
为使其正常工作，PART1脚本应首先完成执行并渲染报价框，然后执行PART3脚本。
但是似乎在PART1之前甚至执行完之前，PART3是被执行！（这不应该发生）

HTML中的多个脚本标签未按顺序执行

0 个答案: