Implementation Code of Textarea and lazy Rendering

The Code is as follows.
Copy codeThe Code is as follows:
<Div>
Render content now
<Ul>
<Li> Zhang San </li>
<Li> Zhang Si </li>
</Ul>
</Div>
<Div>
<Textarea id = "lazyRender01" style = "display: none">
Lazy rendering content
<Ul>
<Li> li San </li>
<Li> li Si </li>
</Ul>
</Textarea>
</Div>
<Script>
SetTimeout (function () {// lazy Rendering
Var el = document. getElementById ('lazyrender01 ');
El. parentNode. innerHTML = el. value;
},1000 );
</Script>

The benefit of the Code is: let the content corresponding to Li San and Li Si, before lazy rendering, do not form dom nodes, do not request images.
Some students asked: "The content in Textarea is unfriendly to search engines ."
No problem. This is also a good solution:
Copy codeThe Code is as follows:
<Div>
Render content now
<Ul>
<Li> Zhang San </li>
<Li> Zhang Si </li>
</Ul>
</Div>
<Div>
<Script> document. write ('<textarea id = "lazyRender01" style = "display: none">'); </script>
Lazy rendering content
<Ul>
<Li> li San </li>
<Li> li Si </li>
</Ul>
</Textarea>
</Div>
<Script>
SetTimeout (function () {// lazy Rendering
Var el = document. getElementById ('lazyrender01 ');
El. parentNode. innerHTML = el. value;
},1000 );
</Script>

The difference between the code is very simple, but the '<textarea id = "lazyRender01">' section is output through document. write in js.
But the results are quite different: even if the browser does not support js, everything can still be displayed as is.