JavaScript　createElementについて

###実現したいこと
詳しい状況はこちらのリンクで確認していただけます→　file:///Z:/CodeCanp/JavaScript/Chapter9/test.html

入力項目を入力し、リンク追加ボタンを押したらリンク付きの文字が出力される事に成功したのですが
もう一度リンク追加ボタンを押すと、新しく出力される文字は同じ行に隣接した形で出力されてしまいます。
P要素のように次に出力される文字は別の行へと表示させたいです。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>課題</title>
6    <script type="text/javascript">
7        
8        function add_element(e) {
9            
10            e.preventDefault();
11
12            var link_box = document.getElementById('link_box').value;
13            var url_box = document.getElementById('url_box').value;
14
15            var element_a = document.createElement('a');
16
17            element_a.innerHTML = link_box;           
18            element_a.href = url_box;
19
20            var box = document.getElementById('box');
21
22            box.appendChild(element_a)
23
24        }
25
26        window.onload = function() {
27        var add = document.getElementById('add');
28        add.addEventListener('click', add_element, false);
29    }
30
31
32    </script>
33</head>
34<body>
35    <form>
36        <p>
37            リンク名：<input type="text" id="link_box" value="">
38            URL：<input type="text" id="url_box" value="">　
39            <button id="add">リンク追加</button>
40        </p>
41    </form>
42
43    <div id="box"></div>
44
45</body>
46</html>