Блог

Главная - Вопросы по программированию - Как добавить дочерний div, который заключает в себе внутреннее содержимое

Как добавить дочерний div, который заключает в себе внутреннее содержимое

#javascript #html

Вопрос:

Я пытаюсь использовать чистый JS (не jquery), чтобы добавить <del> внутреннюю <div> часть, которая обертывает текст «abc»

Для практических целей мне не разрешается использовать метод innerHTML, встроенный CSS или jquery и т. Д. обычный Джей си.

 <html>
<div class='todo'>abc</div>
</html>

моя попытка.

 const todo = document.querySelector('.todo')
const del = document.createElement('del')
todo.appendChild(del)

Но все закончилось тем, что
<div class='todo'>abc <del></del></div> .
Я бы хотел, чтобы у меня
<div class='todo'><del>abc</del></div> .

Ответ №1:

Вы можете сделать короткий трюк, чтобы достичь этого:

1) Добавить textContent todo в del «ы textContent «.

 del.textContent = todo.textContent;

2) Удалите textContent из todo .

 todo.textContent = "";

3) Добавляйте del как ребенок.

 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>

Ответ №2:

Вы можете использовать метод внутреннего текста

 const todo = document.querySelector('.todo')
const del = document.createElement('del')
del.innerText = todo.innerText
todo.innerText = ""
todo.appendChild(del)

Ответ №3:

Перемещение содержимого — экономит его удаление

 const todo = document.querySelector('.todo')
const del = document.createElement('del')
del.append(todo.firstChild)
todo.appendChild(del) 
 <div class='todo'>abc</div>

Или проще

 const todo = document.querySelector('.todo')
todo.innerHTML = todo.textContent.strike() 
 <div class='todo'>abc</div>
Метки: ,