Can someone add fundamental reasons why adding html markup to variable fields is wrong
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:
- string connect operands like '+' make it hard to read
- Indentation is more difficult as it is inconvenient to indent from the margin to simulate a properly formatted html fragment.
- Display logic is closely tied to business application logic, making focus diversification difficult.
a source to share
You have 3 good reasons that are among the top three. Trying to mix the two makes for ugly code, hard to read, hard to maintain, etc.
Another thing that I didn't think about until recently is that some editors like Netbeans will tell you when your HTML is broken. Forgetting to close tags, wrong values, etc. I am using PHP for my job and I got into the habit of doing something 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 the tag, for example if I forgot the closure </span>
somewhere, it would point to it so I can go in and fix it. However, if I were to put HTML in a variable, or repeat it directly, like:
$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 would be no HTML validation from the editor, making it difficult to find those nasty xHTML errors.
a source to share
Some of the reasons:
- It's butt-ugly!
- It's slow. (An operator
+=
in Java is not fast, sometimes acceptable, but definitely not fast because it has to do a lot of object creation and buffer copy.) - It is all too easy to introduce XSS vulnerabilities if the lines were not quoted correctly.
- He's too inflexible; change anything on the layout and you need to change all the code.
Use a template library instead. It's much easier to get right.
a source to share