PDA

View Full Version : Resolved createElement with <br /> tags?



jlizarraga
10-27-2008, 11:47 PM
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
10-28-2008, 12:01 PM
What does this code do?
What is this code supposed to do?

Cheers

jlizarraga
10-28-2008, 05:42 PM
It just creates some HTML.

student101
10-28-2008, 05:44 PM
It just creates some HTML.
Like a html widget or a html text editor?

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
10-28-2008, 05:58 PM
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
10-28-2008, 06:10 PM
Cool.