| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <body> | |
| 4 <div> | |
| 5 <ol> | |
| 6 <li>A</li> | |
| 7 <li id="hostEquivalent"></li> | |
| 8 <li>C</li> | |
| 9 </ol> | |
| 10 </div> | |
| 11 <script> | |
| 12 // We cannot use hostEquivalent.innerHTML instead of appendChild()s because | |
| 13 // the parser prevents to create expected tree: | |
| 14 // | |
| 15 // <ol> | |
| 16 // <li>A</li> | |
| 17 // <li> | |
| 18 // <li>X</li> | |
| 19 // <ul>B</ul> | |
| 20 // <li>Y</li> | |
| 21 // </li> | |
| 22 // <li>C</li> | |
| 23 // </ol> | |
| 24 var hostEquivalent = document.getElementById("hostEquivalent"); | |
| 25 | |
| 26 var childX = document.createElement("li"); | |
| 27 childX.innerHTML = "X"; | |
| 28 hostEquivalent.appendChild(childX); | |
| 29 | |
| 30 var childUl = document.createElement("ul"); | |
| 31 childUl.innerHTML = "B"; | |
| 32 hostEquivalent.appendChild(childUl); | |
| 33 | |
| 34 var childY = document.createElement("li"); | |
| 35 childY.innerHTML = "Y"; | |
| 36 hostEquivalent.appendChild(childY); | |
| 37 </script> | |
| 38 </body> | |
| 39 </html> | |
| OLD | NEW |