String concatenation within a javascript object

Question

I'm sure there is a simple answer to this but I couldn't find it.

I know how to concatenate a normal string in JavaScript but how would I do it within an object?

I require this as I'm reading through an XML file and creating the HTML for a list of links. Each time I go through the loop I want to create a new <li> containing the link. How do I get the current value of the string and then append the new link on the end? Once I've read through the XML I'll append the HTML to the page.

I've tried:

carParks.links = carParks.links + "<li><a href=\"#\">car park</a></li>";

with no success.

Any help is much appreciated.

Answer 1

if you generate tonns of links maybe try /w array.join();

var tmp = [];

for ([iterate over xml]) {
     tmp.push("<li><a href=\"#\">car park</a></li>");
}

carParks.links = tmp.join('');

faster than repeated string concat

Or what if you create a html documentFragment and the browser do the concat for you... When a DocumentFragment is appended, just the ducument fragment cildNodes appends to the concrete element. And the layout calculated once, not like per element append, and you don't have to care about string concat execution times...

var docFrag = document.createDocumentFragment();
for ([iterate over xml]) {
     var current = document.createElement('li');
     current.innerHTML = "<a href=\"#\">car park</a>";
     docFrag.appendChild(current);
}

theElementToAppendMyList.appendChild(docFrag);

Answer 2

You should create a UL object and use appendChild to it for each LI you want

Answer 3

String concatenation with an object property is just the same as anything else. Theoretically the code you have there should work, as long as carParks.links is a writeable property. When you perform string concatenation using the + or += operators, except when using them as arithmetic operators, the operands are converted to strings. For example:

var carParks = {};
carParks.links = carParks.links + "Test";
// -> "undefinedTest", because carParks.links was undefined

If you're getting an error message, check that carParks is defined and is a JavaScript object with writeable properties (e.g. not part of an external interface). If you're getting no error, make sure carParks.links is not a number. If this doesn't help, please post a little more of the surrounding code and I'll take another shot at it.

Answer 4

This is basic string concatenation, however depending on your performance considerations there are different ways you might want to accomplish this; essentially it boils down to either using the string concatenation operators that the language gives you, or array joining. The former is pretty straight forward but slow on older browsers while the latter is faster.

In your example, you're using string concatenation just fine. Another way would be to use the += operator:

carParks.links = carParks.links + "<li><a href=\"#\">car park</a></li>";

The array joining approach looks like the following:

var buffer = [];
while(node != null) {
   buffer.push("<li><a href=\"#\">car park</a></li>");
}
carParks.links = buffer.join('');

---

The array joining approach produces less garbage but I have seen it run more slowly on newer browsers with large (10,000+ items) lists.