Добавить после блока div html код, если в дочерних у него содержится элемент с определенным классом

Рейтинг: 0Ответов: 2Опубликовано: 03.05.2023

На странице много блоков подобного вида:

<div class="left">
    <div class="icon">
        <i class="fa fa-id-card"></i>
    </div>
</div>

Нужно найти блок с классом .left, который содержит i class="fa fa-id-card" и добавить именно после этого блока .left какой-нибудь html код.

Ответы

▲ 2
const container = document.querySelector('.left')
let lever = false
function checkDeep(block) {
    if (block.classList.contains('fa') && block.classList.contains('fa-id-card')) lever = true
    if (block.children) {
        [...block.children].map(innerBlock => {
            checkDeep(innerBlock)
        })
    }
}
checkDeep(container)
if (lever) container.insertAdjacentHTML("afterend", '<div> filler </div>')

Это решение с использованием рекурсии: идет проходка по всем children - проверяется наличие у них искомых классов и заодно есть ли у них самих children.

▲ 0

Нужно найти блок с классом .left, который содержит i class="fa fa-id-card" и добавить именно после этого блока .left какой-нибудь html код.

Предложу такой вариант для jQuery...

$('.fa.fa-id-card').each((_, e) => {
  $(e).parents('.left').eq(0).after('<p>Тест</p>')
})
.left {
  border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
  <div class="icon">
    <i class="fa fa-id-card"></i>
  </div>
</div>