Dynamically add to static and dynamically created

Hello :)

Thank you for looking into my question!

I must add elements to existing websites that I cannot control the HTML output of.

So, I can NOT force every  to have an ID, otherwise, I could simply store all IDs in an array, so that I can later tell, which  tag I have already processed (and which one not)

Long story short, here is what I must achieve:

I must add a  element to every existing  which exists upon loading the website
Additonally, I must also add a  to every NEWLY added  which gets added later dynamically
No  should get multiple new  "children". (so, I must know, which  tags already got a new  upon page load, and which did not)

Below is my code.

So far, I only managed to add a  to every existing  upon page load.

Also, I managed to dynamically add new  tags for testing purposes.

However, I neeed your guys' help to also add a  to every newly added 

Mind you, I am NOT the one creating the new  tags dynamically! The page itself does, and I don't know when it will happen!

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>


<style>
p
{
font-weight:bold;
font-size:20px;
min-height:20px;
}
</style>


</head>

<body>

<form>
<input type="button" id="add" value="Add a &lt;p&gt;">
</form>


<div id="container">

<p style="background-color:yellow;"></p>
<p style="background-color:green;"></p>
<p style="background-color:cyan;"></p>

</div>


<script>

window.addEventListener('load', function()
{
var all_p = document.querySelectorAll("p");
var all_span = [];

	for(var i=0, current_p; current_p = all_p[i++];)
	{
	all_span[i] = document.createElement('span');
	all_span[i].innerHTML = ':-)';
	all_span[i].id = 'span_' + i;
	current_p.appendChild(all_span[i]);
	}


var container = document.getElementById('container');

	document.getElementById('add').addEventListener('click', function()
	{
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	
	var create_p = document.createElement('p');
	create_p.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
	
	container.appendChild(create_p);
	});

});

</script>

</body>
</html>

Tray2

3 years ago

Best Answer

Level 73

Something like this would be the easiest

let elements =  document.querySelectorAll('p');

elements.forEach((el) => {
	el.innerHTML = '<span>Added Span</span>';
});

Put that in a function that you call every time you add an element.

1 like

Ronaldo100

3 years ago

Level 1

Thank you @Tray2 for your answer, however, I am afraid to have to inform you, that a major misunderstanding seems to have happened.

On the bright side: I was able to figure it out in the meantime.

Thank you anyway :)

Please or to participate in this conversation.

Dynamically add <span> to static and dynamically created <p>