createElement with <br /> tags?

[jlizarraga]

Hi all,

Consider the following excerpt from my JS:

	var oBR = document.createElement("br");
	var oClearDiv = document.createElement("div");
	oClearDiv.className = "mm3_ClearDiv";

		for(i=0;i<jws.match.length;i++){
			// Normalize
			var oMatch = jws.match[i];
			
			// Container
			var oLargeResult = document.createElement("div");
			oLargeResult.className = "mm3_LargeResult";
			
			// Thumbnail
			var oResultThumbnail = document.createElement("div");
			oResultThumbnail.className = "mm3_ResultThumbnail";
			var oIMG = document.createElement("img");
			oIMG.src = oMatch.image[0];
			oIMG.alt = oMatch.vin;
			oResultThumbnail.appendChild(oIMG);
			oLargeResult.appendChild(oResultThumbnail);
			
			// Data
			// (title and trim)
			var oResultData = document.createElement("div");
			oResultData.className = "mm3_ResultData";
			var oResultTitle = document.createElement("div");
			oResultTitle.className = "mm3_ResultTitle";
			var oTitleText = document.createTextNode(oMatch.year + " " + oMatch.make + " " + oMatch.model);
			oResultTitle.appendChild(oTitleText);
			oResultTitle.appendChild(oBR);
			var oTrimSpan = document.createElement("span");
			var oTrimSpanText = document.createTextNode(oMatch.trim);
			oTrimSpan.appendChild(oTrimSpanText);
			oResultTitle.appendChild(oTrimSpan);
			oResultData.appendChild(oResultTitle);
			oResultData.appendChild(oClearDiv);
			// (info)
			var oResultInfo = document.createElement("div");
			oResultInfo.className = "mm3_ResultInfo";
			var oInfoText01 = document.createTextNode("Condition: " + oMatch.type + " | Color: " + oMatch.generic_exterior);
			oResultInfo.appendChild(oInfoText01);
			oResultInfo.appendChild(oBR);
			var oInfoText02 = document.createTextNode("Engine: " + oMatch.engine + " | Doors: " + oMatch.doors);
			oResultInfo.appendChild(oInfoText02);
			oResultInfo.appendChild(oBR);
			var oInfoText03 = document.createTextNode("Transmission: " + oMatch.transmission + " | Drive: " + oMatch.drive);
			oResultInfo.appendChild(oInfoText03);
			oResultInfo.appendChild(oBR);
			var oInfoText04 = document.createTextNode("MPG: " + oMatch.mpg_highway + " | Mileage: " + oMatch.mileage);
			oResultInfo.appendChild(oInfoText04);
			oResultInfo.appendChild(oBR);
			var oInfoText05 = document.createTextNode("Stock#: " + oMatch.stocknum + " | VIN: " + oMatch.vin);
			oResultInfo.appendChild(oInfoText05);
			oResultData.appendChild(oResultInfo);
			// (hidden vin)
			var oHidden = document.createElement("input");
			oHidden.type = "hidden";
			oHidden.name = "vin";
			oHidden.value = oMatch.vin;
			oResultData.appendChild(oHidden);
			// (Phew!)
			oLargeResult.appendChild(oResultData);
			
			// Add this result
			oResultsContainer.appendChild(oLargeResult);
		}

Everything outputs as expected, except that the oClearDiv's and oBR's are missing. I assume it has something to do with their lack of content? But It's not like I can give content to a <br />.

Any help greatly appreciated!

[student101]

What does this code do?
What is this code supposed to do?

Cheers

[jlizarraga]

It just creates some HTML.

[student101]

It just creates some HTML.

Like a html widget or a html text editor?

Edit: is this not a CSS issue?
Do you use CSS with this thingy?

 
BR.linebrake { 
clear: both; line-height: 1; 
display: block; /*optional*/
}
BR class="linebrake"

OR

Syntax <BR> 
Attribute Specifications CLEAR=[ left | all | right | none ] (clear floating objects)

Cheers

[jlizarraga]

The problem was trying to append the same node again and again. It just moves the node around, so I didn't notice the single <br> at the very end of the results.

I just make an array of however many I need now:

			// Create an army of <br>'s
			var oBR = new Array();
			for(j=0;j<10;j++){
				var oBreak = document.createElement("br");
				oBR.push(oBreak);
			}

[student101]

Cool.