0

I have a page that was loading some stuff from the database and printing it using PHP, and I decided to change it so that I could add those elements after page load, using javascript.

The markup generated by both methods is identical, but the JS elements have no margin, whereas the PHP elements do:

Generated in PHP:

Elements loaded wih PHP

Added using Javascript:

enter image description here

in either case, the markup is the same in dev tools:

<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>

Why is that margin collapsing when I am adding the elements via JS, as opposed to PHP? Here is the JS snippet:

    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 );
    }
Abraham Brookes
  • 1,720
  • 1
  • 17
  • 32
  • Maybe the JavaScript is not adding the same whitespace around elements. See [Dynamically created elements lose spacing](https://stackoverflow.com/questions/45775261/dynamically-created-elements-lose-spacing). It might help to include the relevant CSS to provide a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) that demonstrates the issue. – showdev Jul 12 '19 at 01:25
  • I would try switching around the orders of the `obj.appendChild()` so that the `div` appends the `a` element before the `a` appends the `img` element – Ben Jul 12 '19 at 01:26
  • They are not technically the same. In your HTML version, there is whitespace/line breaks between the elements, and those spaces are preserved in the output. In the JS version, the elements are added to the DOM tree without spaces. See my previous comment with a link to a similar question. – skyline3000 Jul 12 '19 at 01:31
  • ah whitespace in the PHP file. A frustrating idiosyncrasy. Thank you! – Abraham Brookes Jul 12 '19 at 01:42
  • If you formatted your HTML as one, long string all on the same line, no spaces between elements and no new lines, it would render the same as the JS version. – skyline3000 Jul 12 '19 at 01:51

0 Answers0