| Index: recipes/web/html/inserting_elements.html
|
| diff --git a/recipes/web/html/inserting_elements.html b/recipes/web/html/inserting_elements.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..548ae05aba8dd3c52d3a449ae2d1f39858e08b31
|
| --- /dev/null
|
| +++ b/recipes/web/html/inserting_elements.html
|
| @@ -0,0 +1,65 @@
|
| +<!DOCTYPE html>
|
| +
|
| +<html>
|
| + <body>
|
| + <ol>
|
| + <li>One</li>
|
| + <li>Two</li>
|
| + </ol>
|
| +
|
| + <script type="application/dart">
|
| +
|
| + import 'dart:html';
|
| +
|
| + void main() {
|
| +
|
| + var ol = query('ol');
|
| + ol.insertAdjacentHtml('beforeBegin', '<p>Starting the ol</p>');
|
| + ol.insertAdjacentHtml('afterEnd', '<p>Done with the ol</p>');
|
| +
|
| +
|
| + UListElement ul = new Element.tag('ul');
|
| +
|
| + // Append using element.append()
|
| + ul.append(new Element.html('<li>One</li>'));
|
| +
|
| + // Append using element.appendHtml()
|
| + ul.appendHtml('<li>Two</li>');
|
| +
|
| + // Append using List#add()
|
| + ul.children.add(new Element.html('<li>Three</li>'));
|
| +
|
| + // Append using List#addAll()
|
| + ul.children.addAll([
|
| + new Element.html('<li>Four</li>'),
|
| + new Element.html('<li>Five</li>')
|
| + ]);
|
| +
|
| + // Inserting in the middle
|
| + ul.children.insert(1, new Element.html('<li>One And A Half</li>'));
|
| +
|
| + // Prepending using list method.
|
| + ul.children.insert(0, new Element.html('<li>Zero</li>'));
|
| + // Less good.
|
| + ul.insertAdjacentHtml('afterBegin', '<li>Less than Zero</li>');
|
| +
|
| + // Append using insertAdjacentHtml()
|
| + ul.insertAdjacentHtml('beforeEnd', '<li>Last</li>');
|
| +
|
| + // Don't work.
|
| + ul.insertAdjacentHtml('beforeBegin', '<div>Before the UL</div>');
|
| + ul.insertAdjacentHtml('afterEnd', '<div>After the UL</div>');
|
| +
|
| + document.body.children.add(ul);
|
| +
|
| + document.body.insertAdjacentHtml('afterBegin', '<p>Starting the body</p>');
|
| + document.body.insertAdjacentHtml('beforeEnd', '<p>Ending the body</p>');
|
| +
|
| + // insertBefore() // prepend
|
| + // insertAllBefore() // prepend several
|
| + }
|
| + </script>
|
| +
|
| + <script src="packages/browser/dart.js"></script>
|
| + </body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 14109034:
Recipes for using CSS Selectors with dart:html (Closed)
Base URL: https://github.com/dart-lang/cookbook.git@master