Дэвид Флэнаган - JavaScript. Подробное руководство, 6-е издание

Еще одной особенностью, впервые появившейся в IE и стандартизованной спецификацией HTML5, является метод insertAdjacentHTML() , дающий возможность вставить строку с произвольной разметкой HTML, прилегающую («adjacent») к указанному элементу. Разметка передается методу во втором аргументе, а точное значение слова «прилегающая» («adjacent») зависит от значения первого аргумента. Этот первый аргумент должен быть строкой с одним из значений: «beforebegin», «afterbegin», «beforeend» или «afterend». Эти значения определяют позицию вставки, как изображено на рис. 15.3.

Метод insertAdjacentHTML() не поддерживается текущей версией Firefox. Далее в этой главе будет представлен пример 15.6, демонстрирующий, как можно реализовать метод insertAdjacentHTML() с применением свойства innerHTML и как можно написать методы вставки разметки HTML, не требующие указывать позицию вставки с помощью строкового аргумента.

Иногда бывает необходимо получить содержимое элемента в виде простого текста или вставить простой текст в документ (без необходимости экранировать угловые скобки и амперсанды, используемые в разметке HTML). Стандартный способ выполнения этих операций основан на использовании свойства textContent объекта Node :

var para = document.getElementsByTagName("p")[0]; // Первый

в документе

var text = para.textContent; // Текст "This is a simple document."

para.textContent = "Hello World!"; // Изменит содержимое абзаца

Свойство textContent поддерживается всеми текущими броузерами, кроме IE. В IE вместо него можно использовать свойство innerText . Впервые свойство innerText было реализовано в IE4 и поддерживается всеми текущими броузерами, кроме Firefox.

Свойства textContent и innerText настолько похожи, что обычно могут быть взаимозаменяемы при использовании. Однако будьте внимательны и отличайте пустые элементы (строка "" в языке JavaScript интерпретируется как ложное значение) от неопределенных свойств:

/**

* При вызове с одним аргументом возвращает значение свойства textContent

* или innerText элемента. При вызове с двумя аргументами записывает

* указанное значение в свойство textContent или innerText элемента.

*/

function textContent(element, value) {

var content = element.textContent;

// Свойство textContent определено?

if (value === undefined) { // Если аргумент value не указан,

if (content !== undefined) return content; // вернуть текущий текст

else return element.innerText;

}

else { // Иначе записать текст

if (content !== undefined) element.textContent = value;

else element.innerText = value;

}

}

Свойство textContent возвращает результат простой конкатенации всех узлов Text , потомков указанного элемента. Свойство innerText не обладает четко определенным поведением и имеет несколько отличий от свойства textContent.innerText не возвращает содержимое элементов . Из возвращаемого им текста удаляются лишние пробелы и предпринимается попытка сохранить табличное форматирование. Кроме того, для некоторых элементов таблиц, таких как