Why doesn't getNav2 have the same styling as getNav1?

[WebSteve]

I have a JSfiddle here: https://jsfiddle.net/websteve/y54wzcau/44/

I have a layout that uses grid to lay out the panels It works well and is responsive. If you slide the middle partition line in the fiddle, you’ll see the content change.

I am trying out two different ways to import the content. When I use innerHTML, it picks up the CSS styling for the grid. (function is called getNav1). Full example:

function getNav1() {
document.getElementById('nav1').innerHTML = '<h3>Nav1</h3>'
+ '<div class="container2">'
+ '<div class="grid__item2 a">a</div>'
+ '<div class="grid__item2 b">c</div>'
+ '<div class="grid__item2 c">c</div>'
+ '<div class="grid__item2 d">d</div>'
+ '<div class="grid__item2 e">e</div>'
+ '<div class="grid__item2 f">f</div>'
+ '<div class="grid__item2 g">g</div>'
+ '<div class="grid__item2 h">h</div>'
+ '<div class="grid__item2 i">i</div>'
+ '<div class="grid__item2 j">j</div>'
+ '<div class="grid__item2 k">k</div>'
+ '<div class="grid__item2 l">l</div></div>';
}

When I use TaffyDB to import data, it does not share the CSS styling for the grid (function is called getNav2). Partial example (see bottom of HTML panel in JSfiddle for complete code):

    output.innerHTML=''; // refresh screen, empty the span 
    db({heading:show}).each(function (name){ // show is linked to heading. 'name' is an alias.
    var numb    = name.numb;
    var named   = name.named;
    output.innerHTML+="<div class='grid__item2 " + named + "'>" + numb;
    });
 }

I don’t understand why getNav2 squares don’t have the same styling as getNav1 squares do. They should be alike. Any theories to share?

[WebSteve]

Note that all the elements are the same class, and both sets are in containers of the same class. Also, in Chrome’s Inspector, the html is correct: the divs and classes are correctly portrayed. Yet the styles are not applied equally.

[DaveMaxwell]

The output from getNav2 is NOT the same. You’re missing the close to the div

    output.innerHTML+="<div class='grid__item2 " + named + "'>" + numb;

should be

    output.innerHTML+="<div class='grid__item2 " + named + "'>" + numb + "</div>";

[WebSteve]

JSfiddle was changed to:
output.innerHTML+="<div class='grid__item2 " + named + "'>" + numb + "</div>";

But no change when saved and run. Hmmm.

[DaveMaxwell]

That’s because the JSFiddle is throwing an error about TAFFY, so there’s nothing actually being loaded…

[WebSteve]

In JSFiddle, “TAFFY is not defined” in the Console. On my desktop, no such notice appears. It was copied/pasted as is, except in the same panel as the html, whereas on desktop it is an external file.

[DaveMaxwell]

OK, if you move the TAFFY code out of the Javascript tag and put it into the HTML tab into one of the script tags (not, the script tag stuff should be in the JS tab, but I digress…), then you get data.

BUT your result will be different because your markup is different between nav1 and nav2

for Nav1, you end up with

<span id="nav1">
     <h3>Nav1</h3>
	<div class="container2">
		<div class="grid__item2 a">a</div>
		<div class="grid__item2 b">c</div>
		<div class="grid__item2 c">c</div>
		<div class="grid__item2 d">d</div>
		<div class="grid__item2 e">e</div>
		<div class="grid__item2 f">f</div>
		<div class="grid__item2 g">g</div>
		<div class="grid__item2 h">h</div>
		<div class="grid__item2 i">i</div>
		<div class="grid__item2 j">j</div>
		<div class="grid__item2 k">k</div>
		<div class="grid__item2 l">l</div>
	</div> 
</span>

While for Nav2, you end up with

<h3>Nav2</h3>
<div class="container2">
	<span style="border:2px dashed black;" id="nav2">
	  <div class="grid__item2 a">A</div>
	  <div class="grid__item2 b">B</div>
	  <div class="grid__item2 c">C</div>
	  <div class="grid__item2 d">D</div>
	</span>
</div>

See the difference? In nav1, the span has the container within it, while in nav2, the container has the span in it. While technically, nav2 would be more semantically correct (a span is an inline element and really shouldn’t have child elements in it), you’ll need to correct your css. But if you want to get them to match, change your getData() method to wrap the data with the container

    output.innerHTML='<h3>Nav2</h3>'
				   + '<div class="container2">';
    db({heading:show}).each(function (name){ // show is linked to heading. 'name' is an alias.
    var numb    = name.numb;
    var named   = name.named;
    output.innerHTML+="<div class='grid__item2 " + named + "'>" + numb + "</div>";
    });
    output.innerHTML+= '</div>';