フェッチを使用して外部 HTML を取得するスクリプトを作成してから、何らかの操作で 2 つの HTMLcollection を作成し、最後にそれらを繰り返し処理して、最初のコレクションの 1 つの要素と 2 番目のコレクションの 1 つの要素を含む div を表示します。ここに私が書いたいくつかのコード：
<section id="to_take">
<p>THE EUROPEAN PARLIAMENT AND THE COUNCIL OF THE EUROPEAN UNION,</p>
<p>Having regard to the Treaty establishing the European Community, and in particular Article 175(1) thereof,</p>
<p>Having regard to the proposal from the Commission,</p>
<p>Having regard to the opinion of the European Economic and Social Committee <a href="#1" id="1back">(1)</a>,</p>
<p>Having consulted the Committee of the Regions,</p>
<p>Acting in accordance with the procedure laid down in Article 251 of the Treaty <a href="#2" id="2back">(2)</a>,</p>
<p>Whereas:</p>
<ol>
<li>some li elements that I'm not posting because they are too much.</li>
</ol>
<p>another P element</p>
</section>
これはスクリプトが取得する HTML コードです。他のドキュメントも同じですが、言語が異なります。
スクリプトは次のとおりです。
async function request(input_1, input_2){
var left = await fetch(input_1);
var right = await fetch(input_2);
var text_left = await left.text();
var text_right = await right.text();
var parser = new DOMParser();
var part_1 = parser.parseFromString(text_left, "text/html");
var parser_2 = new DOMParser();
var part_2 = parser_2.parseFromString(text_right, "text/html");
var collection_1 = part_1.getElementById("to_take").children;
var collection_2 = part_2.getElementById("to_take").children;
display_elements(collection_1, collection_2);
}
function display_elements(array_1, array_2){
var article = document.getElementById("contenitore");
var counter = 0;
for (var i in array_1){
var container = document.createElement("div");
container.appendChild(array_1.item(counter));
container.appendChild(array_2.item(counter));
article.appendChild(container);
counter++;
}
}
スクリプトは、必要なものを右側のページ セクションに表示するのに実際にはうまく機能していますが、1 つの奇妙な動作と 1 つのエラーがあります。最初: 2 つのコレクションから最初の要素を取得しますが、スクリプトは 2 番目の要素をスキップして 3 番目の要素に移動し、1 つの要素を取得して次の要素をスキップします。2番目:次のエラーが表示されます:「ノード」で「appendChild」を実行できませんでした:パラメーター1のタイプは「ノード」ではありません。いくつかの要素を変更しようとしましたが、基本的になぜ正しく機能しないのかわかりません。for の代わりに While を使用して、コレクションのメソッドを変更しようとしましたが、一部の要素では機能し、他の要素では機能しないため、エラーがわかりません。