1381134.html (893B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script> 6 addEventListener("DOMContentLoaded", () => { 7 [d1, d2] = document.getElementsByTagName("div"); 8 [s1, s2] = document.getElementsByTagName("span") 9 d3 = document.createElement("div") 10 d4 = document.createElement("div") 11 d4.setAttribute("class", "grid") 12 d3.appendChild(d4) 13 d1.appendChild(document.createElement("span")) 14 setTimeout(() => { 15 d2.removeChild(s2) 16 setTimeout(() => { 17 d2.insertBefore(d3, s1) 18 }, 100) 19 }, 100) 20 }) 21 </script> 22 <style> 23 .columns { 24 columns: 3; 25 } 26 .grid { 27 display: grid; 28 border:5px solid; 29 counter-reset: item; 30 } 31 span { display:contents; } 32 span::before { content: counter(item) ":before"; } 33 span::after { content: counter(item) ":after"; } 34 </style> 35 </head> 36 <body> 37 <div class=columns> 38 <div class=grid> 39 <c></c> 40 <span><c></c></span> 41 <span><c></c></span> 42 </div> 43 </div> 44 </body> 45 </html>