|
1 |
|
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html> |
|
4 <head> |
|
5 <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
6 <title>Adding Node Content</title> |
|
7 |
|
8 <style type="text/css"> |
|
9 /*margin and padding on body element |
|
10 can introduce errors in determining |
|
11 element position and are not recommended; |
|
12 we turn them off as a foundation for YUI |
|
13 CSS treatments. */ |
|
14 body { |
|
15 margin:0; |
|
16 padding:0; |
|
17 } |
|
18 </style> |
|
19 |
|
20 <link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
21 <script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
22 |
|
23 |
|
24 <!--begin custom header content for this example--> |
|
25 <link href="assets//node.css" rel="stylesheet" type="text/css"> |
|
26 |
|
27 <!--end custom header content for this example--> |
|
28 |
|
29 </head> |
|
30 |
|
31 <body class=" yui-skin-sam"> |
|
32 |
|
33 <h1>Adding Node Content</h1> |
|
34 |
|
35 <div class="exampleIntro"> |
|
36 <p>This example demonstrates how to use events with NodeList instances.</p> |
|
37 <p>Clicking a box will update its content.</p> |
|
38 |
|
39 </div> |
|
40 |
|
41 <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
42 |
|
43 <ul id="demo"> |
|
44 <li>foo</li> |
|
45 <li>bar</li> |
|
46 </ul> |
|
47 |
|
48 <script type="text/javascript"> |
|
49 YUI({base:"../../build/", timeout: 10000}).use("node", function(Y) { |
|
50 var onClick = function(e) { |
|
51 var node = e.currentTarget; |
|
52 node.prepend('<em>prepended</em> '); // added as firstChild |
|
53 node.append(' <em>appended</em>'); // added as lastChild |
|
54 node.insert(' <strong>before last child</strong> ', node.get('lastChild')); // added before lastChild |
|
55 node.insert(' <strong>before childNodes[1]</strong> ', 1); // added before childNodes[1] |
|
56 }; |
|
57 |
|
58 Y.all('#demo li').on('click', onClick); |
|
59 }); |
|
60 </script> |
|
61 |
|
62 |
|
63 <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
64 |
|
65 </body> |
|
66 </html> |