JavaScript : HTMLでサイトURLを列挙

意図
　このサイトの左カラムのリンク編集を楽にしたい。URLとサイト名だけ入れればいいようにしたい。

今回作成する物
　下記のHTMLを出力するJavaScript。

<a href="http://searchdesk.com" target="_blank" style="text-decoration: none;">検索デスク</a>
<br><a href="http://www.google.com" target="_blank" style="text-decoration: none;">google</a>

　liタグは個人的に好きじゃないので使ってません。

作成したJavaScript

可変用(DOM)

<div id="site"></div>
<script>
(function() {
  var s = [];//s[] = {name:'',url:''};
  s[0] = {name:'検索デスク',
           url:'http://searchdesk.com/'};
  s[1] = {name:'google',
           url:'http://www.google.com/'};

  const targetBlank    = true;//target="_blank"
  const textDecoration = true;//style="text-decoration: none;"
  
  var text='';
  for(var i = 0 ; i < s.length ; i++){
    if(i != 0){text += '<br>';}
    text += '<a href="' + s[i].url + '"';
    if(targetBlank)   {text +=' target="_blank"';}
    if(textDecoration){text +=' style="text-decoration: none;"';}
    text += '>' + s[i].name + '</a>';
  }
  document.getElementById("site").innerHTML = text;
}());
</script>

実用(DOM)

<div id="site"></div>
<script>(function() {
  var s = [];//s[] = {name:'',url:''};
  s[0] = {name:'検索デスク',url:'http://searchdesk.com/'};
  s[1] = {name:'google',url:'http://www.google.com/'};
  
  const targetBlank = true; const textDecoration = true;
  var text='';for(var i=0;i<s.length;i++){if(i!=0){text+='<br>';}text+='<a href='+s[i].url;if(targetBlank){text+=' target="_blank"';}if(textDecoration){text+=' style="text-decoration: none;"';}text+='>'+s[i].name+'</a>';}

  document.getElementById("site").innerHTML = text;
}());</script>

可変用(document.write)

<script>
(function() {
  var s = [];//s[] = {name:'',url:''};
  s[0] = {name:'検索デスク',
           url:'http://searchdesk.com/'};
  s[1] = {name:'google',
           url:'http://www.google.com/'};

  const targetBlank    = true;//target="_blank"
  const textDecoration = true;//style="text-decoration: none;"
  
  var text='';
  for(var i=0 ; i<s.length ; i++){
    if(i != 0){text += '<br>';}
    text += '<a href="' + s[i].url + '"';
    if(targetBlank)   {text +=' target="_blank"';}
    if(textDecoration){text +=' style="text-decoration: none;"';}
    text += '>' + s[i].name + '</a>';
  }
  document.write(text);
}());
</script>

実用(document.write)

<script>(function(){
  var s = [];//s[] = {name:'',url:''};
  s[0] = {name:'検索デスク',url:'http://searchdesk.com/'};
  s[1] = {name:'google',url:'http://www.google.com/'};

  const targetBlank = true;const textDecoration = true;
  var text=''; for(var i=0;i<s.length;i++){if(i != 0){text+='<br>';}text+='<a href='+s[i].url;if(targetBlank){text+=' target="_blank"';}if(textDecoration){text+=' style="text-decoration: none;"';}text+='>'+s[i].name+'</a>';}document.write(text);
}());</script>

　HTMLで書いてるのが分かりやすいように毎回DOMってたけど、document.writeの方がソースがすっきりする。

追記
　寝て起きて思った。
　馬鹿か私は。ユーザー定義関数の方がコード短くて改行少なくて可読性があるじゃん。配列使う必要全くないじゃん。target="_blank"とかは可読性あればTFする必要ないじゃん。馬鹿か私は。
　上の4つのコードは暇な人用ということで。

<!-- 可読性あるコード -->
<script>
(function(){
  function link(name,url){
    document.write('<br>'+'<a href="'+url+'" target="_blank" style="text-decoration: none;">'+name+'</a>');
  }
  link('検索デスク','http://searchdesk.com');
  link('google','http://google.com');
  //link('','');
}());
</script>

<!-- 組み込むコード -->
<script>(function(){function a(name,url){if(name!=""){document.write('<br>'+'<a href="'+url+'" target="_blank" style="text-decoration: none;">'+name+'</a>');}}
a('検索デスク','http://searchdesk.com');
a('google','http://google.com');
a('','');

}());</script>

　組み込むコードも普通に読みやすいという。
　改行の位置は自分のとこに組み込む用に変えてます。


追記
　使い勝手悪かったんで変更。はじめにbrタグ入ってたのを入らないようにしたのと、組み込む際になるべく文字数が少なくなるようにしたのと。
　どんな用途のコードでも大抵長くなるんやなと思いました。まあ私の技能が足りないだけかもしれませんが。

<!-- 可読コード -->
<script>
(function(){
  var first=0;
  function a(nm,url){
    let output='';
    if(nm!=''){
      if(first==0){first++;}
      else        {output+='<br>';}
      output+='<a href="'+url+'" target="_blank" style="text-decoration: none;">'+nm+'</a>';
    }
    document.write(output);
  }
  a('検索デスク','http://searchdesk.com');
  a('google','http://google.com');
  a('','');

}());
</script>


<!-- 組み込み -->
<script>(function(){var f=0;function a(nm,url){let t='';if(nm!=''){if(f==0){f++;}else{t+='<br>';}t+='<a href="'+url+'" target="_blank" style="text-decoration: none;">'+nm+'</a>';document.write(t);}}
a('検索デスク','http://searchdesk.com');
a('google','http://google.com');
a('','');

}());</script>