Wie schreiben Sie Valid XHTML 1.0 Strict Code, wenn Sie Javascript verwenden, um ein Element zu füllen, die ein Kind erfordert?

Question

Ich bin mit meiner Website durch den Validator des W3C versucht, es als XHTML 1.0 Strict zu validieren zu bekommen, und ich habe bis auf ein besonders klebrig (zumindest in meiner Erfahrung) Validierungsfehler bekommen. Ich bin auch bestimmte Abzeichen von verschiedenen Diensten in der Website, die ihre eigene API und Code für die Aufnahme auf einer externen Seite zur Verfügung stellen. Diese Abzeichen verwenden Javascript (zum größten Teil) ein Element zu füllen, die Sie im Markup einfügen, die ein Kind benötigt. Dies bedeutet, dass am Ende, absolut gültige Markup erzeugt wird, sondern auf den Validator, alles was man sieht, ist einen unvollständigen Eltern-Kind-Tag, die sie dann auf einen Fehler werfen.

Als Vorbehalt, ich verstehe, dass ich auf die Dienste beschweren könnte, die ihre Abzeichen validieren nicht. Sans dies, Ich gehe davon aus, dass jemand ihren Code validiert hat, während einschließlich Abzeichen so, und das ist, was mich interessiert. Antworten wie ‚Beschweren auf Flickr über ihre Abzeichen‘ sind mir nicht viel helfen.

Eine weitere Einschränkung: Ich würde es vorziehen, dass so viel wie möglich das Markup semantisches bleibt. I.E. ein leeres li-Tag oder tr-td Paare Hinzufügen zu, es wäre eine unerwünscht Lösung zu machen zu bestätigen, obwohl es notwendig sein kann. Wenn das der einzige Weg ist, kann es zu validieren gemacht werden, na ja, aber bitte lehnen Antworten auf semantisches Markup.

Als Beispiel:

<div id="twitter_div">
<h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=1"></script>
</ul>
</div>

Beachten Sie die ul-Tags die Javascript-Verpackung. Dies führt schließlich wird mit lis über das Skript gefüllt, sondern den Validator es sieht nur die unbewohnte ul.

Vielen Dank im Voraus!

Answer 1

Das folgende Fragment ist gültiges XHTML und hat den Zweck erfüllt:

<div id="twitter_div">
    <h2 class="twitter-title"><a href="http://twitter.com/stopsineman" title="Tim's Twitter Page.">Twitter Updates</a></h2>
    <div id="myDiv" />
</div> 

<script type="text/javascript">
    var placeHolderNode = document.getElementById("myDiv");
    var parentNode = placeHolderNode.parentNode;
    var insertedNode = document.createElement("ul");
    insertedNode .setAttribute("id", "twitter_update_list");
    parentNode.insertBefore( insertedNode, placeHolderNode);
    parentNode.remove(placeHolderNode);
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=5"></script>

Answer 2

Vielleicht könnten Sie Javascript verwenden, um die anfängliche Abzeichen HTML zu schreiben? Sie würden wahrscheinlich wollen nur der Code Abzeichen in dem Dokument eingefügt werden, wenn Javascript um es zu füllen vorhanden war, nicht wahr?

Sie würden nur brauchen, um Ihr Dokument schriftlich für Ihre verschiedenen Abzeichen vor dem Javascript, stellen Sie sicher, passiert.

Könnten Sie ein konkretes Beispiel für den HTML / Link zu einer Seite mit dem ungültigen Code geben?

Answer 3

Die Lösungen können für jedes Abzeichen unterschiedlich sein. In Twitter Fall, können Sie einfach Ihre eigene Callback-Funktion schreiben. Hier ist ein Beispiel, basierend auf ihrem Abzeichen Code:

<div id="twitter_div">
  <h2><a href="http://twitter.com/stopsineman">@Twitter</a></h2>
  <div id="twitter_update_list"></div>
</div>

<script type="text/javascript">
function updateTwitterCallback(obj)
{
  var twitters = obj;
  var statusHTML = "";
  var username = "";
  for (var i = 0; i < twitters.length; i++)
  {
    username = twitters[i].user.screen_name;
    statusHTML += ('<li><span>' + twitters[i].text + '</span> <a style="font-size:85%" href="http://twitter.com/' + username + '/statuses/' + twitters[i].id + '">' + relative_time(twitters[i].created_at) + '</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = '<ul>' + statusHTML + '</ul>';
}
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stopsineman.json?callback=updateTwitterCallback&amp;count=1"></script>

Answer 4

Ich habe ein

mit "display: none" in dem

Tag:

<ul id="twitter_update_list"><li style="display:none;">A</li></ul>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/01241.json?callback=twitterCallback2&amp;count=1"></script>

Das stört nicht das Skript und in diesem Fall ist es funktioniert, und ich denke, es ist nicht ein " unerwünscht Lösung":)

Answer 5

An einem gewissen Punkt der Seite gültig wird, nicht wahr? Das ist das einzige Mal, es kann wirklich validiert werden.

Ich bin nicht sicher, ob eine nicht-triviale Seite wird an jedem Punkt während des Bau gültig bleiben, wenn es mit einer Menge von DOM Scripting aufgebaut wird.

Answer 6

Dies ist vielleicht nicht die populärste Meinung zu diesem Thema, aber ...

Kümmere dich nicht um 100% Validierung. Es ist einfach nicht so große Sache.

Der Punkt der Validierung ist Ihren Markup als Standard wie möglich zu machen. Warum? Da Browser, die Markup gegeben werden, die nicht der Spezifikation nicht entspricht (zB Markup, lässt sich aber nicht) tun, um ihre eigene Fehlerprüfung zu korrigieren und die Seite den Weg zeigen Sie soll dem Benutzer suchen. Die Qualität der Browser eine Fehlerüberprüfung ändert, bla-bla-bla, es besser ist, gültig Markup zu haben ... Aber es ist nicht einmal Ihr Code, der die Validierung verursacht zum Scheitern verurteilt! Die Leute, die diese Abzeichen schrieb wahrscheinlich getestet sie in mehreren Browsern (und Sie sollten die gleichen, natürlich tun), wenn sie wie erwartet funktionieren dann lassen Sie es dabei.

Kurz gesagt, es gibt keinen Preis für die Validierung:)