Wrap HTML-Element

[Uepsilon]

Hallo zusammen,
ich möchte im Shop nachträglich ein Element mit einem

umschließen. Das kann mit jQuery und $.wrap gemacht werden, aber wollte jQuery erstmal nicht einbinden und habe es mit diesem Code versucht:

testingTable = document.getElementsByClassName("testingTable").innerHTML;
wrappedHTML = "<div class='table-scrollable'>" + testingTable + "</div>";
document.getElementsByClassName("testingTable").innerHTML = wrappedHTML ;

Das Script binde ich in productmain.tpl mit oxscript ein, es wird auch geladen, nur leider hat es keine Auswirkungen auf des ausgelieferte HTML. Wird das nicht zu richtigen Zeit geladen und muss ich an einer anderen Stelle einbinden oder ist mein Vorgehen mies ?

Viele Grüße

[rubbercut]

Annahme:

$(document).ready(function() {
   console.log('Fertig? Dann mach');
});

In JS dürfte dies readyState sein.

[Uepsilon]

Okay, müsste dann dieser Code sein:

document.onreadystatechange = function () {
  if (document.readyState == "complete") {

Funktioniert aber auch nicht.

[rubbercut]

Schau Dir capture an. Und
getElementsByClassName gibt ein Array aus. Wenn der erste Wert zählt, dann musst mit: [0] arbeiten.

document.getElementsByClassName(“testingTable”)[0].innerHTML;

Nachtrag:

@Uepsilon

document.onreadystatechange = function () {
  if (document.readyState == "complete") {

funktioniert, sofern korrektes JS verwendet wird…

[Uepsilon]

Hier noch ein Snippet, falls mal wer ähnliches Problem ohne jQuery behandelt:

document.onreadystatechange = function () {	
	let htmlCollection = document.getElementsByClassName("myHtmlElements");
	
	for (let i = 0; i < htmlCollection.length; i++) {
		let toWrapElement = htmlCollection[i].outerHTML;
		let newElement= "<div class='yourClass'>" + toWrapElement  + "</div>";
		htmlCollection[i].outerHTML = newElement;
	}
}