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

StackOverflow https://stackoverflow.com/questions/149844

题

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

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

另一个警告：我希望标记尽可能保持语义。 I.E.添加空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。

提前致谢！

有帮助吗？

解决方案

以下片段是有效的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>

其他提示

也许您可以使用javascript来编写初始徽章HTML？如果可以使用javascript填充它，您可能只希望将徽章代码插入到您的文档中，对吗？

您只需要确保您的文档编写在各种徽章的javascript之前发生。

您能否举例说明使用无效代码的网页的HTML /链接？

每个徽章的解决方案可能有所不同。在Twitter的情况下，你可以编写自己的回调函数。以下是基于徽章代码的示例：

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

我放了<！> lt; li <！> gt; with <！> quot; display：none <！> quot;在<！> lt; ul <！> gt;标记：

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

这不会打扰脚本，在这种情况下它可以工作， 我认为它不是<！>“不受欢迎的解决方案<！>”; ：）

在某些时候页面变得有效，对吗？这是唯一可以真正验证的时间。

如果构建了很多DOM脚本，我不确定在构建过程中的每个点都会保持非常重要的页面。

这可能不是关于这个主题的最受欢迎的意见，但是......

不要担心100％验证。这不是什么大不了的事。

验证的目的是使您的标记尽可能标准化。为什么？因为给定不符合规范的标记的浏览器（例如，不验证的标记）会进行自己的错误检查以纠正它并以您希望它向用户查看的方式显示页面。浏览器错误检查的质量各不相同，yadda-yadda-yadda，最好有有效的标记......但是甚至你的代码都没有导致验证失败！编写这些徽章的人可能会在多个浏览器中对它们进行测试（当然，你应该这样做），如果它们按预期工作，那么就把它留在那里。

简而言之，验证没有奖励：）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top