Dynamically Inject new HTML into a web page and be able to access any new DOM elements that are in the "new" injected HTML

Question

I found this link that suggested injecting a table into a div.

enter link description here

Here is an example of new HTML that I want to inject:

<br />
<br />


<LSz class='LineSpaceDouble'>
Hi, <p class='FIRST_NAME'> </p> <br><br>
Hi <p class='FIRST_NAME'> </p>, my name is <p class='MYNAME'> </p> .
More Text.<br>
</LSz>

<br />


     <label for='PBirthDate'>Primary Birthdate:</label>
     <input id='PBirthDate' class='input100' type='text' name='PBirthDate' placeholder='mm/dd/yr' size='10'>
     <span class='focus-input100'></span>
<br />

Here is my current jq code that does the injection:

var S = J;

$(S).appendTo('#Script_Displayed');

J holds HTML text to be injected.

and Script_Displayed is the id of the div

THAT works -- in that the "text" is indeed injected into the web page where the div is located.

My problem is when I attempt to change a value:

var Z = document.getElementsByClassName('FIRST_NAME');

Z.innerHTML  = "Anthony";

The new innerHTML value does not appear on the web page.

What Can I do to make these changes visible?

Answer 1

The function getElementsByClassName returns a collection of elements, not a single element. So this won't work by default:

Z.innerHTML  = "Anthony";

Instead, loop over the collection to assign the innerHTML value to each element in the collection:

var Z = document.getElementsByClassName('FIRST_NAME');
for (let el of Z) {
  el.innerHTML  = "Anthony";
}

Hi, <p class='FIRST_NAME'> </p> <br><br>
Hi <p class='FIRST_NAME'> </p>, my name is <p class='MYNAME'> </p> .
More Text.<br>