Estoy tratando de usar JS puro (no jquery) para agregar un <del> dentro del <div> que envuelve el texto 'abc'
Para fines de práctica, no tengo permitido usar el método innerHTML, CSS en línea o jquery, etc. js simple.
<html> <div class='todo'>abc</div> </html>mi intento.
const todo = document.querySelector('.todo') const del = document.createElement('del') todo.appendChild(del) Pero esto terminó con <div class='todo'>abc <del></del></div> . Me gustaría tener <div class='todo'><del>abc</del></div> .
Puedes hacer un pequeño truco para lograr esto:
1) Agregue textContent de todo al textContent de del .
del.textContent = todo.textContent; 2) Eliminar el textContent de texto de todo .
todo.textContent = ""; 3) Agregar del como un niño.
todo.appendChild(del) const todo = document.querySelector('.todo') const del = document.createElement('del') del.textContent = todo.textContent; todo.textContent = ""; todo.appendChild(del) <div class='todo'>abc</div>Puedes usar el método de texto interno
const todo = document.querySelector('.todo') const del = document.createElement('del') del.innerText = todo.innerText todo.innerText = "" todo.appendChild(del)Mover el contenido: ahorra borrarlo
const todo = document.querySelector('.todo') const del = document.createElement('del') del.append(todo.firstChild) todo.appendChild(del) <div class='todo'>abc</div>O más simple
const todo = document.querySelector('.todo') todo.innerHTML = todo.textContent.strike() <div class='todo'>abc</div>