javascript - obtener - innerhtml que es

Método javascript puro para envolver el contenido en un div

Question

Quiero envolver todos los nodos dentro del div #slidesContainer con JavaScript. Sé que se hace fácilmente en jQuery, pero estoy interesado en saber cómo hacerlo con JS puro.

Aquí está el código:

<div id="slidesContainer">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
    <div class="slide">slide 4</div>
</div>

Quiero envolver los divs con una clase de "slide" colectivamente dentro de otro div con id="slideInner" .

Answer 1

Al igual que BosWorth99, también me gusta manipular los elementos dom directamente, esto ayuda a mantener todos los atributos del nodo. Sin embargo, quería mantener la posición del elemento en el dom y no solo agregar el final en caso de que hubiera hermanos. Aquí esta lo que hice.

var wrap = function (toWrap, wrapper) {
    wrapper = wrapper || document.createElement(''div'');
    toWrap.parentNode.appendChild(wrapper);
    return wrapper.appendChild(toWrap);
};

Answer 2

Contenido de etiqueta múltiple de wrapInner

function wilWrapInner(el, wrapInner) {
  var _el = [].slice.call(el.children);
  var fragment = document.createDocumentFragment();
  el.insertAdjacentHTML(''afterbegin'', wrapInner);
  var _wrap = el.children[0];
  for (var i = 0, len = _el.length; i < len; i++) {
    fragment.appendChild(_el[i]);
  }
  _wrap.appendChild(fragment);
}

Enlace Demo Jsbin

Answer 3

Me gusta manipular los elementos de dom directamente: createElement, appendChild, removeChild, etc. a diferencia de la inyección de cadenas como element.innerHTML . Esa estrategia funciona, pero creo que los métodos nativos del navegador son más directos. Además, devuelven un nuevo valor de nodo, lo que le salva de otra llamada getElementById innecesaria.

Esto es realmente simple, y debería estar vinculado a algún tipo de evento para hacer cualquier uso.

wrap();
function wrap() {
    var newDiv = document.createElement(''div'');
    newDiv.setAttribute("id", "slideInner");
    document.getElementById(''wrapper'').appendChild(newDiv);
    newDiv.appendChild(document.getElementById(''slides''));
}

jsFiddle

Tal vez eso ayude a comprender este problema con vanilla js.

Answer 4

Por lo que entiendo, la respuesta de @Michal es vulnerable a los ataques XXS (el uso de innerHTML es una vulnerabilidad de seguridad) Aquí hay otro enlace al respecto.

Hay muchas maneras de hacer esto, una que encontré y me gustó es :

function wrap_single(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}
let divWrapper;
let elementToWrap;
elementToWrap = document.querySelector(''selector'');
// wrapping the event form in a row
divWrapper = document.createElement(''div'');
divWrapper.className = ''row'';
wrap_single(elementToWrap, divWrapper);

Esto funciona bien Sin embargo, para mí, a veces solo quiero envolver partes de un elemento. Así que modifiqué la función a esto:

function wrap_some_children(el, wrapper, counter) {
  el.parentNode.insertBefore(wrapper, el);
  if ( ! counter ) {
    counter = el.childNodes.length;
  }
  for(i = 0; i < counter;  i++) {
    wrapper.appendChild( el.childNodes[0] );
  }
}
// wrapping parts of the event form into columns
let divCol1;
let divCol2;
// the elements to wrap
elementToWrap = document.querySelector(''selector'');
// creating elements to wrap with
divCol1 = document.createElement(''div'');
divCol1.className = ''col-sm-6'';
divCol2 = document.createElement(''div'');
divCol2.className = ''col-sm-6'';
// for the first column
wrap_some_children(elementToWrap, divCol1, 13);  // only wraps the first 13 child nodes
// for the second column
wrap_some_children(elementToWrap, divCol2);

Espero que esto ayude.

Answer 5

Si parchea document.getElementsByClassName para IE , puede hacer algo como:

var addedToDocument = false;
var wrapper = document.createElement("div");
wrapper.id = "slideInner";
var nodesToWrap = document.getElementsByClassName("slide");
for (var index = 0; index < nodesToWrap.length; index++) {
    var node = nodesToWrap[index];
    if (! addedToDocument) {
        node.parentNode.insertBefore(wrapper, node);
        addedToDocument = true;
    }
    node.parentNode.removeChild(node);
    wrapper.appendChild(node);
}

Ejemplo: http://jsfiddle.net/GkEVm/2/

Answer 6

Si sus "diapositivas" están siempre en slidesContainer, puede hacer esto

org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id=''slidesInner''>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;

Answer 7

Un buen consejo general para tratar de hacer algo que normalmente harías con jQuery, sin jQuery, es mirar la fuente de jQuery . ¿Qué hacen? Bueno, agarran a todos los hijos, los agregan a un nuevo nodo y luego agregan ese nodo dentro del padre.

Aquí hay un pequeño método simple para hacer precisamente eso:

const wrapAll = (target, wrapper = document.createElement(''div'')) => {
  ;[ ...target.childNodes ].forEach(child => wrapper.appendChild(child))
  target.appendChild(wrapper)
  return wrapper
}

Y así es como lo usas:

// wraps everything in a div named ''wrapper''
const wrapper = wrapAll(document.body) 

// wraps all the children of #some-list in a new ul tag
const newList = wrapAll(document.getElementById(''some-list''), document.createElement(''ul''))