javascript - Javascript オンクリック

Question

JavaScript に問題があります。取得したものの上にコンテンツをロードするボタンを作成しようとしています。これを行うためにいくつかの関数を作成しました。スクリプトが既に読み込まれている場合、HTML ページで関数をテストすると完全に機能しますが、onclick イベントを使用して関数を呼び出すと、コンテンツを含むまったく新しい .html ページが作成されます。

作成したページを保存してソースを表示したところ、body タグに javascript 関数の内容が書かれた空白のページだったのでわかります。

ここにHTMLがあります。

            <ul class="sub-menu">
                <li onclick='articleRead("test", DeviantArtUpdateContent)'><a href="#Deviant Art Update">Deviant Art Update</a></li>
                <li><a href="#">'Triumph At Last' Album Preview</a></li>
                <li><a href="#">Short Funny and Stupid</a></li>
                <li><a href="#">Project Preview</a></li>

            </ul>

<div id="aID"></div>

これがジャバスクリプトです。

function articlePopUp   ( title , content)  {
document.write('<div class="backgroundFade"></div>');
document.write('<div class="articlePosition"><div class="closeArticle">Close</div>');
document.write('<div class="articleRead">');
document.write('<h1>');
document.write(title);
document.write('</h1>');
document.write('<div class="grey-line"></div>');
document.write(content);
document.write('</div></div>');
}
function articleRead ( title, content)  {
    document.getElementById("aID").innerHTML=articlePopUp(title,content);   
}

前に言ったように、onclick イベントなしで HTML ドキュメント内の関数を呼び出すと、意図したとおりに動作しますが、onclick イベントを追加すると、クリックすると空白のドキュメントが作成されます。関数を目的の div id の既存のドキュメントに書き込みたい。事前に助けてくれてありがとう、これは本当に私を困惑させます。