Search code examples
javascripthtmlperformancesemanticsuser-experience

Semantics vs DOM Manipulation

What are all of your thoughts on semantic markup vs DOM manipulation?

For example, I can have an error message under a field like

<label for="email">Email:</label>
<input type="email" name="email" id="email">
<div class="error" id="email-error">Please enter a valid email address.</div>

where the error class would be hidden, and displayed on an error with javascript. This obviously requires little DOM Manipulation, but is it semantic markup?

The other option would be to leave the error div out, and do something like

var element = $('#email');

if($("#EmailError").length==0) {
     $(element).after('<div class="error" id="email-error">Please enter a valid email address.</div>');
}

and only put it in if there is actually an error. What do you all think?

Solution

  • Adding content with JavaScript is significantly better then having wrong, but invisible, content (which will be consumed by search engines and people without CSS).