Как добавлять в div per-message элементы, но удалять per-string?

от
prokoding.ru > JavaScript > Как добавлять в div per-message элементы, но удалять per-string?

Для добавления элементов в div и удаления определенных элементов в JavaScript, вы можете использовать следующие методы и функции:

1. Создайте div элемент с помощью метода createElement():

var div = document.createElement('div');

2. Добавьте созданный div элемент в родительский элемент, например, body, с помощью метода appendChild():

document.body.appendChild(div);

3. Чтобы добавить per-message элементы в div, создайте новые элементы с помощью createElement() и добавьте их в созданный div элемент:

var message1 = document.createElement('div');
message1.className = 'per-message';
div.appendChild(message1);

var message2 = document.createElement('div');
message2.className = 'per-message';
div.appendChild(message2);

4. Чтобы удалить конкретные per-string элементы из созданного div элемента, используйте метод removeChild():

var strings = div.getElementsByClassName('per-string');
for (var i = strings.length - 1; i >= 0; i--) {
    div.removeChild(strings[i]);
}

5. Чтобы удалить все per-string элементы из созданного div элемента, можно использовать функцию querySelectorAll():

var strings = div.querySelectorAll('.per-string');
strings.forEach(function (string) {
    div.removeChild(string);
});

Вот полный пример кода:

// Создаем div элемент и добавляем его в body
var div = document.createElement('div');
document.body.appendChild(div);

// Добавляем per-message элементы в div
var message1 = document.createElement('div');
message1.className = 'per-message';
div.appendChild(message1);

var message2 = document.createElement('div');
message2.className = 'per-message';
div.appendChild(message2);

// Удаляем все per-string элементы из div
var strings = div.querySelectorAll('.per-string');
strings.forEach(function (string) {
    div.removeChild(string);
});

Обратите внимание, что вы должны заменить 'per-message' и 'per-string' на ваши собственные классы элементов в соответствии с вашей разметкой. Кроме того, убедитесь, что код выполняется после загрузки DOM, например, поместив его внутрь события DOMContentLoaded или размещая скрипт в конце <body> тега.