Как лучше всего заменить между собой несколько div(ов)?

Question

Помогите реализовать, (в JS новичок) есть следующие div блоки:

<div id="Comment" class="form-element__column" style="width:220px; margin-left: 30px">
    <div class="form-element__name" style="padding-right: 20px; width: 100%">Комментарий: </div>
        <div style="width: 230px; padding-right: 50px">
                <div style="border:none; margin-top: 20px; width: 100%;">

и их надо заменить на это

<div id="Comment" style="display: flex">
    <div style="float: right; width: 100px">Комментарий: </div>
            <div style="float: left; width: 200px; padding-left: 175px">
                <div>

как это можно реализовать JS без подключения сторонних библиотек?

Answer 1

как это можно реализовать JS без подключения сторонних библиотек?

Например вот так...

const o = document.querySelector('#Comment')
o.removeAttribute('class')
o.style = 'display: flex'
const a = [
  {class: true, style: 'float: right; width: 100px'},
  {style: 'float: left; width: 200px; padding-left: 175px'},
  {style: false},
]
o.querySelectorAll('div').forEach((o, i) => {
  if (a[i].class) o.removeAttribute('class')
  if (a[i].style === false) o.removeAttribute('style')
  else o.setAttribute('style', a[i].style)
})

<div id="Comment" class="form-element__column" style="width:220px; margin-left: 30px">
  <div class="form-element__name" style="padding-right: 20px; width: 100%">Комментарий: </div>
  <div style="width: 230px; padding-right: 50px">
    <div style="border:none; margin-top: 20px; width: 100%;">
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как лучше всего заменить между собой несколько div(ов)?

Ответы (1 шт):