How do I make the < a href tags and < br> function as tags instead of displaying as strings on the screen? See the second line:
// write results to screen
var modList = "< a href='" + model[i][2] + "'> " + model[i][0] + "< /a>< br>";
var para = document.createElement("p"); // Create element
var h = document.createTextNode(modList); // Create a text node
para.appendChild(h); // Append text to element
document.getElementById("carList").appendChild(para); // Append to carList
document.getElementById("assembly").style.display = "none";
They are displaying as “< a href=‘page_url’>RC18T2< /a>< br>” instead of “RC18T2”
By using createElement to create them instead of createTextNode.
createTextNode creates a node containing text - as its name implies.
so you need: document.createElement("a") and document.createElement("br") to create the <a> and <br> tags.You then set the href property of the <a> node and append the textNode into it before appending both to the paragraph.
// write results to screen
var elemA = document.createElement("a");
var modUrl = model[i][2];
elemA.href = modUrl;
document.getElementById("carList").appendChild(elemA);
var modName = model[i][0];
var name = document.createTextNode(modName);
elemA.appendChild(name);
document.getElementById("carList").appendChild(elemA);
var elemBr = document.createElement("br");
document.getElementById("carList").appendChild(elemBr);
Don’t add elements one at a time to the page. Either add the nested elements to the one that wraps around all of them first and then add that one element to the page at the end or create a fragment and add all the elements to that first and then add the fragment to the page.
You should ONLY have ONE call to document.getElementById("carList").appendChild() to add the new content to the page. You should assemble the new content completely before adding it to the page.
var frag = document.createDocumentFragment();
var elemA = document.createElement("a");
var modUrl = model[i][2];
elemA.href = modUrl;
frag.appendChild(elemA);
var modName = model[i][0];
var name = document.createTextNode(modName);
elemA.appendChild(name);
frag.appendChild(elemA);
var elemBr = document.createElement("br");
frag.appendChild(elemBR);
document.getElementById("carList").appendChild(frag);
It would probably be helpful to explain why we want to append just once, rather than laying down a rule to be blindly followed.
@StevenHu Minimizing DOM access is a performance optimization. Every time you append an element to the document, browsers will reflow the page (re-calculate the positions and geometries of elements), so if you append several times during your intermediate steps, then you’ll inadvertently cause several reflows. But if instead you assemble your DOM fragment in isolation, then append it to the document in just one step, you can minimize reflows.