Dynamically creating targets

[philipp-lehmann]

I try to track quite a lot of targets, so naturally I trying to initate them dynamically.
First question: Is this even recommended/feasible?

for (var i = 1; i <= numItems; i++) {
	// Create and append entity
	var newEntity = document.createElement("a-entity");
	newEntity.setAttribute("mindar-image-target",  "targetIndex: " + i);
	container.appendChild(newEntity);


	// Create and append plane
	var newPlane = document.createElement("a-plane");
	newEntity.appendChild(newPlane);
	...
} 

My problem is that in the line newEntity.setAttribute("mindar-image-target", "targetIndex: " + i); the attribute is set empty.
The weird thing is when changing it to something generic the code works.

Here is an example for the output

<a-entity mindar-image-demo="targetIndex: 1"></a-entity>      <!-- attribute attached correctly -->
<a-entity mindar-image-target=""></a-entity>                  <!-- attribute empty -->

What am I missing? Any help is appreciated.
Cheers

[philipp-lehmann]

The issue seems to arrise when aframe or mind-ar is loaded. The function would work well.
I have now this workaround to create a string and attach it to the DOM manually.

for (var i = 0; i < numItems; i++) {

	// Create entity with raw DOM, because of attribute issue
	const newEntityRaw = '<a-entity id="entity' + i + '" mindar-image-target="targetIndex: ' + i + '"></a-entity>';
	container.innerHTML += newEntityRaw;

	// Get the created entity
	var newEntity = document.getElementById("entity" + i);
	newEntity.setAttribute("color", "blue");

	// Create and append plane
	var newPlane = document.createElement("a-plane");
	newEntity.appendChild(newPlane);
	...
}