JavaScriptでHTMLを書く案

　まあ普通にHTML書いた方が楽なんですけどね。

<section>
  <h1>こんにちは</h1>
  <p>本日もいい天気ですね</p>
</section>


案１　普通にdocument.write
<script>
document.write(
  '<section>'
  +'<h1>こんにちは</h1>'
  +'<p>本日もいい天気ですね</p>'
  +'</section>'
);
</script>


案２　タグ用ユーザー定義関数作る
<script>
function h(tag,a){let obj=tag;var t='<';if(a){t+='/';}t+=obj+'>';document.write(t);}
function o(txt){document.write(txt);}

//出力
h('section');
  h('h1');o('こんにちは');h('h1','/');
  h('p');o('本日もいい天気ですね');h('p','/');
h('section','/');
</script>


案３　使うタグのユーザー定義関数を作る
<script>
function o(txt){document.write(txt);}
function section(a){let t='<' +arguments.callee.name; if(a){t+=' '+a;} t+='>'; document.write(t);}
function section0(){let t='</'+arguments.callee.name.slice(0,-1)+'>';          document.write(t);}
function h1(a)     {let t='<' +arguments.callee.name; if(a){t+=' '+a;} t+='>'; document.write(t);}
function h10()     {let t='</'+arguments.callee.name.slice(0,-1)+'>';          document.write(t);}
function p(a)      {let t='<' +arguments.callee.name; if(a){t+=' '+a;} t+='>'; document.write(t);}
function p0()      {let t='</'+arguments.callee.name.slice(0,-1)+'>';          document.write(t);}

//出力
section();
  h1('style="color: green;"'); o('こんにちは'); h10();
  p(); o('本日もいい天気ですね'); p0();
section0();
</script>

　案３の「arguments.callee.name」はそのfunctionの名前を文字列で取得する関数です。名前を取得してHTMLタグにしてる感じですね。現在推奨されない関数なので、じきに存在が消えるかもしれません。
　案３で属性の有無を確認してスペース入れてますが、属性がない状態でスペースを入れても全く問題がないです。スペース消したverを下記に載せます。

//ifのあり・なし・なしをdoc.writeに突っ込む
function section(a){var t='<'+arguments.callee.name; if(a){t+=' '+a;}t+='>'; document.write(t);}
function section(a){var t='<'+arguments.callee.name+' '+a+'>'; document.write(t);}
function section(a){document.write('<'+arguments.callee.name+' '+a+'>');}

<script>
function o(txt){document.write(txt);}
function section(a){document.write('<' +arguments.callee.name+' '+a      +'>');}
function section0(){document.write('</'+arguments.callee.name.slice(0,-1)+'>');}
function h1(a)     {document.write('<' +arguments.callee.name+' '+a      +'>');}
function h10()     {document.write('</'+arguments.callee.name.slice(0,-1)+'>');}
function p(a)      {document.write('<' +arguments.callee.name+' '+a      +'>');}
function p0()      {document.write('</'+arguments.callee.name.slice(0,-1)+'>');}

//出力
section();
  h1('style="color: green;"'); o('こんにちは'); h10();
  p(); o('本日もいい天気ですね'); p0();
section0();
</script>

　if消した方が可読性あって良いですね。


追記

■案３追加１　タグの形になる所を別の所でまとめて処理
<script>
function o(txt){document.write(txt);}
function process(arg,a){document.write('<' +arg+' '+a+'>');}
function process0(arg) {document.write('</'+arg+'>');}

function section(a){process (arguments.callee.name,a);          }
function section0(){process0(arguments.callee.name.slice(0,-1));}
function h1(a)     {process (arguments.callee.name,a);          }
function h10()     {process0(arguments.callee.name.slice(0,-1));}
function p(a)      {process (arguments.callee.name,a);          }
function p0()      {process0(arguments.callee.name.slice(0,-1));}

//出力
section();
  h1('style="color: green;"'); o('こんにちは'); h10();
  p(); o('本日もいい天気ですね'); p0();
section0();
</script>

■案３追加２　配列needTagsでタグ追加する。タグ名のユーザー定義関数はevalでやる
<script>
var needTags=[
   'section'
  ,'h1'
  ,'p'
];//,''

for(let x=0;x<needTags.length;x++){
  let tag=needTags[x];
  eval('function '+tag+'(a){document.write("<' +tag+' "+a+">");}');
  eval('function '+tag+'0(){document.write("</'+tag+'>");}');
}
function o(txt){document.write(txt);}
</script>

<script>
section();
  h1('style="color: green;"'); o('こんにちは'); h10();
  p(); o('本日もいい天気ですね'); p0();
section0();
</script>

//組み込み用
<script>
var needTags=[
   'section'
  ,'h1'
  ,'p'
  
];//,''
function o(txt){document.write(txt);}
for(let x=0;x<needTags.length;x++){let tag=needTags[x];eval('function '+tag+'(a){document.write("<' +tag+' "+a+">");}');eval('function '+tag+'0(){document.write("</'+tag+'>");}');}
</script>

　同じ処理の所を削りまくって仕上がったのが上のもの。可読性が全然ありますね。
　eval気になる人は注意。