ПОЖАЛУЙСТА, ПРОСМОТРЕТЬ РЕЗУЛЬТАТ КОДА НА ПОЛНОЙ СТРАНИЦЕ
Я пытаюсь получить текстовое содержимое из набора вложенных HTML элементов, которые по-видимому, добавляются во время выполнения скриптом / API.
Обратите внимание, что quote_text и children[j] - это элементы, добавленные в runtime по API / скрипту. следовательно, это не в моем прямом контроле. (Я обнаружил их с помощью inspect element ). Поэтому я пытаюсь изменить их, используя javascript, поскольку они не находятся под моим контролем.
Однако это случается что даже несмотря на то, что скрипт / API, который отвечает за добавление цитаты в стиле , ИМЕЕТ В нем СОДЕРЖАНИЕ, он отображается ПУСТО (ПУСТО) при попытке установить его содержимое в другой div с помощью скрипта
Почему это происходит, и как мне go достичь этого?
Причина, по которой я это делаю, заключается в том, что мне не нужен стиль формата, заданный 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 должен сначала sh завершить выполнение и рендеринг окна цитат, а после этого сценарий PART3 должен выполняться.
Но похоже, что это ДО PART1 даже завершает выполнение, PART3 выполняется !! (Чего не должно происходить)