jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-01-29 14:04:02 +03:00
parent 26008151b9
commit 3af3564921
15 changed files with 231 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

64
2-ui/1-document/12-multi-insert/article.md
View file

@ -188,6 +188,53 @@ ul.appendChild(fragment); // вместо фрагмента вставятс
Понять текущее положение вещей вы можете, запустив следующий [edit src="benchmark"]небольшой бенчмарк[/edit].
## append/prepend, before/after, replaceWith
Сравнительно недавно в [стандарте](https://dom.spec.whatwg.org/) появились методы, которые позволяют вставить что угодно и куда угодно.
Синтаксис:
<ul>
<li>`node.append(...nodes)` -- вставляет `nodes` в конец `node`,</li>
<li>`node.prepend(...nodes)` -- вставляет `nodes` в начало `node`,</li>
<li>`node.after(...nodes)` -- вставляет `nodes` после узла `node`,</li>
<li>`node.before(...nodes)` -- вставляет `nodes` перед узлом `node`,</li>
<li>`node.replaceWith(...nodes)` -- вставляет `nodes` вместо `node`.</li>
</ul>
Эти методы ничего не возвращают.
Во всех этих методах `nodes` -- DOM-узлы или строки, в любом сочетании и количестве. Причём строки вставляются именно как текстовые узлы, в отличие от `insertAdjacentHTML`.
Пример (с полифиллом):
```html
<!--+ run autorun height=80 -->
<html>
<head>
<meta charset="utf-8">
<script src="//polyfill.webservices.ft.com/v1/polyfill.js?features=Element.prototype.mutation"></script>
</head>
<body>
<script>
// добавим элемент в конец <body>
var p = document.createElement('p');
document.body.append(p);
var em = document.createElement('em');
em.append('Мир!');
// вставить в параграф текстовый и обычный узлы
p.append("Привет, ", em);
// добавить элемент после <p>
p.after(document.createElement('hr'))
</script>
</body>
</html>
```
## Итого
@ -195,9 +242,14 @@ ul.appendChild(fragment); // вместо фрагмента вставятс
<li>Манипуляции, меняющие структуру DOM (вставка, удаление элементов), как правило, быстрее с отдельным маленьким узлом, чем с большим DOM, который находится в документе.
Конкретная разница зависит от внутренней реализации DOM в браузере.</li>
<li>Семейство методов `elem.insertAdjacentHTML(where, html)`, `insertAdjacentElement`, `insertAdjacentText` позволяет вставлять HTML/элемент/текст в произвольное место документа.
<li>Семейство методов для вставки HTML/элемента/текста в произвольное место документа:
<ul>
<li>`elem.insertAdjacentHTML(where, html)`</li>
<li>`elem.insertAdjacentElement(where, node)`</li>
<li>`elem.insertAdjacentText(where, text)`</li>
</ul>
Метод `insertAdjacentHTML` не поддерживается в Firefox до версии 8, остальные два метода не поддерживаются в Firefox, на момент написания текста, вообще, но есть небольшой скрипт [insertAdjacentFF.js](insertAdjacentFF.js), который добавляет их. Конечно, он нужен только для Firefox.
Два последних метода не поддерживаются в Firefox, на момент написания текста, но есть небольшой полифилл [insertAdjacentFF.js](insertAdjacentFF.js), который добавляет их. Конечно, он нужен только для Firefox.
</li>
<li>`DocumentFragment` позволяет минимизировать количество вставок в большой живой DOM. Эта оптимизация особо эффективна в старых браузерах, в новых эффект от неё меньше или наоборот отрицательный.
@ -205,6 +257,14 @@ ul.appendChild(fragment); // вместо фрагмента вставятс
`DocumentFragment`, в отличие от `insertAdjacent*`, работает с коллекцией DOM-узлов.
</li>
<li>Современные методы, работают с любым количеством узлов и текста, желателен полифилл:
<ul>
<li>`append/prepend` -- вставка в конец/начало.</li>
<li>`before/after` -- вставка после/перед.</li>
<li>`replaceWith` -- замена.</li>
</ul>
</li>
</li>
</ul>