JavaScript conseguir elemento padre y escribir div soporte para los hermanos

Question

que tienen la siguiente estructura:

<div class="parent"> 
    <div id="child1">Content here</div> 
    <div class="child2">Content here</div> 
</div> 

En proceso de carga, quiero incluir un "titular" div, que contiene todos los hijos del padre de este modo:

<div class="parent"> 
    <div id="holder"> 
    <div id="child1">Content here</div> 
    <div class="child2">Content here</div> 
    </div> 
</div> 

Conociendo solo la identificación "child1", ¿cómo puedo agregar un div titular sobre sí mismo y sus hermanos?

Consideraciones

• El "child1" id es el único identificador conocida.
• La clase "principal" y "child2" son nombres dinámicos y cambiarán, por lo que no se pueden usar como identificadores.
• tiene que ser vainilla JavaScript.

¿Pensamientos?

Answer 1

En vista de que esto tiene que ser JavaScript (y no jQuery) y sólo se puede indentify niño1 por id se podría hacer algo tan crudo como este:

var child1 = document.getElementById("child1"), 
    parent = child1.parentNode, 
    contents = parent.innerHTML ; 
    parent.innerHTML = '<div id="holder">' + contents + '</div>'; 

Espero que esto ayude ...

Answer 2

dijo que no jQuery, esto suena como una tarea, sino:

var el = document.getElementById('child1'); 
var parent = el.parentNode; 
parent.innerHTML = '<div id="holder">' + parent.innerHTML + '</div>';