Eso es fácil:

1. Iterar sobre todos los elementos con details de clase.
2. Para cada uno de esos elementos, desestructurar los hijos más allá del primer hijo en una variable.
3. Crea el elemento circundante usando document.createElement .
4. Agregue el elemento circundante.
5. Agregue los elementos que reestructuró en 2. al nuevo elemento.

No intente resolver el problema copiando algunas cadenas HTML y usando innerHTML , ya que perderá cualquier detector de eventos potencialmente adjunto a los elementos que envuelva.

 const details = document.querySelectorAll('.details'); for (const detail of details) { const [ first, ...childrenToWrap ] = [...detail.children]; const div = document.createElement('div'); div.className = 'overlay'; detail.append(div); div.append(...childrenToWrap); }

 .overlay { background-color: orange; }

 <div class="details"> <div class="avatar"> <img src="https://i.imgur.com/1r7oGBt.png"></div> <p><span class="u_title">None</span> <span class="u_rank"></span></p> <dl class="u_group"><dt>Group</dt> <dd>User</dd> </dl> <dl class="u_posts"><dt>Messages</dt> <dd>52</dd> </dl> <dl class="u_scoresystem rep_zero"><dt>Score System</dt> <dd>0</dd> </dl> <dl class="u_status"><dt>Estado</dt> <dd>Anónimo</dd> </dl> </div>

Es muy fácil. Use document.createElement para crear el elemento, agregar atributos y agregarlo al elemento seleccionado.

 var myEl = document.createElement("div"); // Use "className" because JavaScript "class" is a reserved keyword. myEl.className = "myClass"; // Append it document.querySelector("div").appendChild(myEl);

Ejemplo de trabajo en vivo:

 var myEl = document.createElement("div"); // Use "className" because JavaScript "class" is a reserved keyword. myEl.className = "myClass"; // Append it document.querySelector("div").appendChild(myEl); if (!!myEl) { myEl.textContent = "You can append other attributes too!"; }

 <div> </div>

También puede agregarlo como un elemento principal:

 var currentEl = document.querySelector("div"); currentEl.outerHTML = `<div class="myClass">${currentEl.outerHTML}</div>`;

También puede agregar muchos otros atributos.

Lea más sobre createElement en Document.createElement() .

Creo que necesitas algo como esto:

 let messages = 52; let score = 0; document.body.insertAdjacentHTML('afterbegin',` <div class="details"> <div class="avatar"> <img src="https://i.imgur.com/1r7oGBt.png"></div><div class="overlay"> <p><span class="u_title">None</span> <span class="u_rank"></span></p> <dl class="u_group"><dt>Group</dt><dd>User</dd></dl> <dl class="u_posts"><dt>Messages</dt><dd>${messages}</dd></dl> <dl class="u_scoresystem rep_zero"><dt>Score System</dt><dd>${score}</dd></dl> <dl class="u_status"><dt>Estado</dt><dd>Anónimo</dd></dl></div></div> `);

En el código anterior, como puede ver, puede insertar mensajes y calificar dinámicamente la cadena y también puede agregar el HTML dinámicamente usando JavaScript al cuerpo de su documento html.