Javascript can't see html elements fetched form a local file

Question

I have an html file created by converting a Word file into html. I copy-pasted the html code generated by Word into an html file that I added to my project (let's call it "local.html").

By using the fetch() function, I retrieved the text from the local.html file and added the data (formatted as text) to the innerHTML of a div within my index.html file.

The js code to do this is:

 fetch("./local.html")
  .then(response => {
    return response.text();
  })
  .then(data => {
    document.getElementById("aDivInIndexhtml").innerHTML = data;
  });

The html tags generated by Word were recognized and correctly rendered by the browser (I am using Opera).

However, javascript does not see those elements (I can't do anything on them).

I thought this is because I added them to the innerHTML instead of appending the elements to the DOM.

I hence tried to append the div containing those elements (the "aDivInIndexhtml") to another div in my index.html. Same problem. the code is:

   var newDiv = document.createElement("div");
   newDiv.appendChild("aDivInIndexhtml");

What is most weird is that when I do:

console.log(document.getElementById("aDivInIndexhtml").children;

I get an HTMLCollection listing those elements.

Yet, if I try to access any element in the collection using for example:

document.getElementById("aDivInIndexhtml").children[0];`

or

 document.getElementById("aDivInIndexhtml").children.item(0);

I get an error telling that it is undefined.

If i do:

document.getElementById("aDivInIndexhtml").children.length

I get a 0 length collection although the same collection shows many elements when console.loged !

All the elements appear in the DOM of the browser and are rendered, but they almost do not exist for javascript or jquery.

I thought it would be the place of my code in the js file. I moved it to the end. Same problem.

Is it linked to the html/xml structure generated by Word? if so, how to fix it?

Answer 1

While printing this

document.getElementById("aDivInIndexhtml").children[0];

and this

 document.getElementById("aDivInIndexhtml").children.item(0);

You are getting undefined just because you div element aDivInIndexhtml does not have any children yet and it is an array, so that's why it is returning length 0 because it is empty. So to get it done, just append children in aDivInIndexhtml div like this:

Change this

   var newDiv = document.createElement("div");
   newDiv.appendChild("aDivInIndexhtml");

To This

   var newDiv = document.createElement("div");
   var aDivInIndexhtml = document.getElementById("aDivInIndexhtml");
   newDiv.appendChild(aDivInIndexhtml);

One more thing which is wrong here is you are passing string "aDivInIndexhtml" inside appendChild method, this is another reason you elements are not rendered in DOM, because appendChild method requires element not string.