Как работает метод insertAdjacentHTML для вставки HTML-кода в определенное место в документе?

Метод insertAdjacentHTML в JavaScript позволяет вставлять HTML-разметку в указанное место относительно выбранного элемента. coursme.com Он разбирает указанный текст как HTML или XML и вставляет полученные узлы в дерево DOM в указанной позиции. developer.mozilla.org

Метод принимает два параметра: www.freecodecamp.org

1. position. www.freecodecamp.org Строковое значение, которое определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. developer.mozilla.org Возможные значения: developer.mozilla.org

• «beforebegin» — до самого элемента (до открывающего тега). developer.mozilla.org
• «afterbegin» — сразу после открывающего тега элемента (перед первым потомком). developer.mozilla.org
• «beforeend» — сразу перед закрывающим тегом элемента (после последнего потомка). developer.mozilla.org
• «afterend» — после элемента (после закрывающего тега). developer.mozilla.org

1. html. coursme.com HTML-разметка, которую нужно вставить. coursme.com

Позиции «beforebegin» и «afterend» работают только в том случае, если узел находится в дереве и имеет родительский элемент. basicweb.ru

Метод insertAdjacentHTML не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с innerHTML. developer.mozilla.org