Tengo la siguiente estructura html:
<span>foobar</span>
Me gustaría envolver el contenido de texto de este lapso en otra etiqueta como esta usando javascript puro:
<span><p>foobar</p></span>Ya probé esto pero sin éxito:
span.appendChild(virtualDoc.createElement('p'));¡Gracias por leerme!
Usa Element.childNodes y .append()
// DOM utility functions: const el = (sel, par) => (par || document).querySelector(sel); const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop); // Task: Wrap and re-append: const elTarget = el("div"); // Demo only. Use a better, unique selector instead const elParagr = elNew("p"); // Create the Paragraph elParagr.append(...elTarget.childNodes); // Append childNodes to Paragraph elTarget.append(elParagr); // Insert all back into the target element div {border: 2px solid red;} p {border: 2px solid blue;} <!-- P inside SPAN is invalid HTML markup, use a DIV instead! --> <div>foobar <b>baz</b></div>Hola, puedes hacer esto fácilmente al tener una función que primero guardará el contenido anterior antes de agregar el elemento P. Por favor, compruebe el código a continuación:
<span id="span">foobar</span> <input type="button" value="add element" onclick="addElem()"> function addElem(){ content = document.getElementById("span").innerHTML; document.getElementById("span").innerHTML = "<p>"+ content +"</p>"; }Violín: https://jsfiddle.net/p2czo5qe/
Puede archivar esto muy fácilmente usando la función de Javascript innerHTML . Como eso:
Nota ¿Está realmente seguro de que desea envolver etiquetas p dentro de una etiqueta span?
function addElem() { spans = document.querySelectorAll('div span'); container = document.querySelector('div'); nc = ''; spans.forEach(s => { c = s.innerHTML; nc = nc + `<p>${c}</p>`; }); container.innerHTML = '<span>' + nc + '</span>'; } span { color: red; } span p { color: green; } <div> <span>foobar</span> <span>baz</span> </div> <input type="button" value="add element" onclick="addElem()">Estructura de salida
<span> <p>foobar</p> <p>baz</p> </span>