尽管标记相同，但JS添加的元素与HTML编写的元素显示不同

Question

我有一个页面正在从数据库中加载某些内容并使用PHP进行打印，因此我决定对其进行更改，以便可以在页面加载后使用javascript添加这些元素。

两种方法生成的标记是相同的，但是JS元素没有边距，而PHP元素却有：

用PHP生成：

使用Java脚本添加

无论哪种情况，开发工具中的标记都是相同的：

<div id="departureTimes">
    <div class="depTime" data-id="2">11:30
        <a href="javascript:void(0)" class="delObjBtn" data-type="DepartureTime" data-id="2"><img src="img/icons/icon-mini-cross-grey.png"></a>
    </div>
    <div class="depTime" data-id="3">12:25
        <a href="javascript:void(0)" class="delObjBtn" data-type="DepartureTime" data-id="3"><img src="img/icons/icon-mini-cross-grey.png"></a>
    </div>
</div>

当我通过JS（而不是PHP）添加元素时，为什么利润下降了？这是JS代码段：

    var plate = document.getElementById( 'departureTimes' );
    plate.innerHTML = '';

    var deps = this.ticket.children.DepartureTime;
    for( var i = 0; i < deps.length; i ++ ){
        var c = deps[i];

        var div = document.createElement( 'div' );
        div.classList.add( 'depTime' );
        div.dataset.id = c.DBid;

        var a = document.createElement( 'a' );
        a.href = 'javascript:void(0)';
        a.classList.add( 'delObjBtn' );
        a.dataset.type = "DepartureTime";
        a.dataset.id = c.DBid;

        var img = document.createElement( 'img' );
        img.src= "img/icons/icon-mini-cross-grey.png";

        a.appendChild( img );
        div.appendChild( document.createTextNode( c.time ) );
        div.appendChild( a );
        plate.appendChild( div );
    }