当您使用javascript填充需要孩子的元素时,如何编写Valid XHTML 1.0 Strict代码？

Question

我正在通过W3C的验证器运行我的网站,试图让它验证为XHTML 1.0 Strict并且我已经达到了特别粘性(至少在我的经验中)验证错误.我在网站上提供了来自各种服务的某些徽章,这些徽章提供了自己的API和代码以包含在外部网站上.这些徽章使用javascript(大多数情况下)来填充您在需要子项的标记中插入的元素.这意味着最终会生成完全有效的标记,但是对于验证器,它看到的只是一个不完整的父子标记,然后它会抛出错误.

作为一个警告,我理解我可以向他们的徽章不验证的服务投诉.没有这个,我认为有人已经验证了他们的代码,同时包括这样的徽章,这就是我感兴趣的内容.诸如"向Flickr抱怨他们的徽章"之类的答案对我没什么帮助.

另一个警告:我希望标记尽可能保持语义.IE添加一个空的li标签或tr-td对以使其验证将是一个不合需要的解决方案,即使它可能是必要的.如果这是唯一的方法可以验证,哦,好吧,但请倾向于语义标记的答案.

举个例子:

<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>

注意包含javascript的ul标签.这最终通过脚本填充了lis,但是对于验证器,它只能看到未填充的ul.

提前致谢!

Answer 1

以下片段是有效的XHTML并完成工作:

<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>