javascript(jquery)のリンクを新規ウィンドウでひらくtarget_bankを付与したい

Question

jquery で吐き出されるＵＲＬのソースを新規ウィンドウで開くようにtarget_blankを付与しようとしたところ、

下記の参考サイトをみました。
【JavaScript】外部リンクにtargetを自動追加して別タブで開くようにする
参考サイト内容

    <div id="iframe">
<script type= "text/javascript">
$(function(){
  $.ajax({
    url: "https://www.e-nisino.com/blog/feed/",
    cache: false,
    dataType:"xml",
    success: function(xml){
      $(xml).find('item').each(function(){
        var title = $(this).find('title').text();
        var url = $(this).find('link').text();
        $('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList');
        
        });
    }
  });
});
//ページのドメインを取得
const domain = document.domain;
//取得したドメインを検証対象に指定
const regexp = new RegExp(domain);

//特定の要素内に存在するa要素が対象
const target = document.getElementById('feedList');
const elements = target.getElementsByTagName('a');

//ページ内に存在する全てのa要素が対象
//const elements = document.getElementsByTagName('a');

for(let element of elements){
    //a要素のhref（リンク）を取得
    let href = element.getAttribute('href');
    
    //a要素のhref（リンク）にドメインが含まれていなければ
    if(!regexp.test(href)){
        //a要素にtarget="_blank"を追加する
        element.setAttribute('target', '_blank');
        //a要素にrel="noopener noreferrer"を追加する
        element.setAttribute('rel', 'noopener noreferrer');
    }
}
</script>
</div>
<ul id="feedList"></ul>
<ul id="feed"></ul>

ソースに参考サイトのソースを追加しましたが、
target_blank で動きません。

どうすればきちんど、新規ウィンドウでひらけますでしょうか？

Answer 1

原因は、
非同期処理の前に追加しようとしているからです。
つまり、a要素が追加される前に、target="_blank"を追加しようとしてしまっています。

なので、$ajaxの中の構文内の時点で、
target="_blank"を加味した要素を追加するようにするのが手っ取り早いかと。

Answer 2

<script>
$(function(){
  title="test";
  url="http://exsample.com";
  $('ul#feedList').append($('<li>').append($('<a target="_blank">').attr('href',url).text(title)));

});
</script>
<ul id="feedList"></ul>

Comments

[niconic73027793]

ありがとうございます！　出来ました。