Как с помощью JS или CSS добавить html-блок с привязкой к псевдоклассу?

Question

[ian14]

Добрый день. Может кто сталкивался с такой задачей, подскажите, как можно вставить на страницу какой-либо div с кодом, выполнив привязку к псевдоклассу nth-child?

К примеру, есть на странице список объектов с одинаковым классом .element, как мне вывести какой-либо div после .element:nth-child(3)? Реально ли такое сделать при помощи только CSS и свойства content? Заранее спасибо.

Answer 1

[FeST1VaL]

Например через JS. Перебираете блоки с элементами, и делаете подсчет, ставите условие если он равен 3, то добавить после него блок

UPD: https://jsfiddle.net/fest1val/war194f5/

Comments

[ian14]

Можете показать пример? Я не силен в JS, у меня вместо добавления div после 3 блока он сам заменяется на этот div

https://jsfiddle.net/L9p0k58v/

[FeST1VaL]

ian14, https://jsfiddle.net/fest1val/war194f5/

[ian14]

Артем Будин, спасибо большое!

Answer 2

[Павел]

я правильно понимаю надо что либо вывести:

.element
.element
.element
вот тут ?
.element
.element
.element

Comments

[ian14]

Да, правильно

[Павел]

ian14, вот это надо? https://codepen.io/mrusklon/pen/omYmyo?editors=1010

[ian14]

Павел, нет, я про то, как можно после 3-го, к примеру, элемента вывести полноценный div с произвольным содержимым. Но первая строчка, сдается мне, задает правильный вектор поиска ))

[ian14]

Павел, https://jsfiddle.net/L9p0k58v/ вот тут уже ближе к правде, но так после 3-го следующий элемент пропадает. Может как-то можно вместо указания номера элемента задать, например, псевдоэлемент ::after в CSS и уже его заменять в js...

[Павел]

ian14, я знаю как на jquery легко сделать , на нативном js опыта не хватает(
https://codepen.io/mrusklon/pen/omYmyo?editors=1010

[Павел]

ну или вот так на js можно https://codepen.io/mrusklon/pen/YBpMmZ?editors=1010

[ian14]

Павел, вот, отличный вариант, буду использовать его, спасибо большое!