Can someone add fundamental reasons why appending html markup to field variables is wrong

Question

   html += '<tr style="display:none;"><td class="leftval">ID:</td><td><span id="' + _uniqueId + '-id">' + one + '</span></td></tr>';
    html += '<tr><td class="leftval"><label for="' + _uniqueId + '-itemdesc" title="This is the descriptive text that will actually appear in the email.">Description: </label></td>';
    html += '<td><input value="' + four + '" class="CDinput" name="itemdesc" id="' + _uniqueId + '-itemdesc" type="text"></td></tr>';
    html += '<tr><td class="leftval"><label for="' + _uniqueId + '-title" title="This is the title text that is used in the email.  The text usually is used as the anchor text of a link.">Title: </label></td>';
    html += '<td><input value="' + five + '" class="CDinput" name="title" id="' + _uniqueId + '-title" type="text"></td></tr>';
    html += '<tr><td class="leftval"><label style="color:#f16d44;" for="' + _uniqueId + '-enddate" title="This is the expiration of the offer.  The formating here is arbitrary and does not impact how the end date would look in the actual template.">End Date: </label></td>';
    html += '<td><input style="width:230px" value="' + six + '" class="CDinput" name="enddate" id="' + _uniqueId + '-itemenddate" type="text">';//I'm overriding the default width for the calendar image
    html += '<img style="cursor:pointer;" class="CDdate" id="' + _uniqueId + '-dateselector"src="/images/Calendar_hyperlink.png"></td></tr>';

I can think of 3 reasons:

1. string connector operands like ' + ' make it harder to read
2. Indentation is more difficult since it's awkward to indent the field to simulate a properly formatted html snippet.
3. Display logic is mixed in tightly with business application logic, making diversifying focus difficult.

Answer 1

You have 3 good reasons listed, and are in the top three. Trying to mix the two makes for ugly code, hard to read, hard to maintain, etc.

One other thing, though, that I hadn't thought of until recently, is that some editors, such as Netbeans, will tell you when your HTML is broken. Forgetting to close tags, wrong values, etc. I'm using PHP for my work, and I've gotten into the habit of doing soemthing like this:

<li>
    <span class='name'><?php echo _TAG_INDEX ?>:</span>
    <span class='value'><?php echo $get_zone_array['DB_ID'] ?></span>
</li>

Using it like this, if I forgot to close a tag, like if I forgot the closing </span> somewhere, it would point it out for me, so I could go in and fix it. However, if I was putting the HTML into a variable, or echoing it directly, like this:

$html = "<li><span class='name'>"._TAG_INDEX.":<span>" // notice missing / in </span>
      . "<span class='value'>".$get_zone_array['DB_ID']."</span>"
      . "</li>";
echo $html;

then there wouldn't be any HTML-checking from the editor, making finding those nasty little xHTML errors harder to find.

Answer 2

Some of the reasons:

1. It's butt-ugly!
2. It's slow. (The += operator in Java is not fast. Sometimes acceptable, but definitely not fast because it has to do a lot of object creation and buffer copying.)
3. It's too easy to introduce XSS vulnerabilities through strings not being properly quoted.
4. It's too inflexible; change anything on the layout and you have to change all the code.

Use a templating library instead. So much easier to get right.