javascript - 即使标记相同，使用 JS 添加的元素与使用 HTML 编写的元素的显示方式也不同

Question

我有一个页面正在从数据库加载一些东西并使用 PHP 打印它，我决定更改它，以便我可以在页面加载后使用 javascript 添加这些元素。

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

在 PHP 中生成：

使用 Javascript 添加：

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

<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 );
    }

标签： javascriptphphtmlcss