驗證JavaScript生成的動態HTML
[英]Validate dynamic HTML generated by JavaScript
問題描述
如何檢查JavaScript生成的內容是否為有效的HTML？ 例如，以下文檔將傳遞靜態HTML驗證（例如validator.nu），不會產生任何JavaScript錯誤，並且在瀏覽器中無需投訴即可呈現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
<script>
window.onload = function() {
var text = document.createTextNode('nested anchor');
var anchor = document.createElement('a');
var nested_anchor = document.createElement('a');
nested_anchor.appendChild(text);
anchor.appendChild(nested_anchor);
document.getElementsByTagName('body')[0].appendChild(anchor);
};
</script>
</head>
<body>
<p>test</p>
</body>
</html>
但是，輸出包含另一個錨元素內的錨，根據HTML5規范，該錨元素無效。 有沒有辦法檢查這些錯誤？
4 個解決方案
解決方案1
3 已采納 2011-10-13 09:39:56
您可以將生成的HTML作為String輸出，將其嵌入到有效文檔中並發送以進行驗證。 在您的情況下，使用jQuery var htmlText = $(anchor).html() 。
甚至更簡單，輸出整個結果html console.log($("html").html())
解決方案2
2 2011-10-13 09:54:07
可能的方法是使用Web Developer工具欄 （Chrome和Firefox）的Validate Local HTML功能。 此功能將使用W3驗證程序驗證生成的HTML。
您也可以使用我的JavaScript書簽來驗證本地HTML，而不是下載擴展程序。 創建書簽，並將下面的代碼粘貼到“URL”字段。 然后，只要您想驗證本地HTML，請單擊書簽。
下面的代碼是獨立的，不需要任何框架。
javascript:void(function(){
var form = document.createElement("form");
form.method = "POST";
form.enctype = "multipart/form-data";
form.action = "http://validator.w3.org/check";
form.target = "_blank";
/* Get local HTML*/
var html = "<html>" + document.documentElement.innerHTML + "</html>";
var post_data = {
fragment: html,/*Settings for validator*/
prefill: "0",
doctype: "HTML5",
prefill_doctype: "html401",
group: "0",
ss: "1",
outline: "1"
};
for(var name in post_data){
(function(){
var t = document.createElement("textarea");
t.name = name;
t.value = post_data[name];
form.appendChild(t)
})()
}
document.body.appendChild(form);
form.submit(); /* Open validator, in new tab*/
document.body.removeChild(form);
})()
解決方案3
0 2013-06-17 13:17:24
“只需在完全加載后保存html源代碼並使用該靜態文件進行驗證。”
我認為這是否有效，瀏覽器會在從DOM中快速拍攝HTML時解決許多問題。
解決方案4
0 2011-10-13 09:51:07
只需在完全加載后保存html源代碼並使用該靜態文件進行驗證。
如何使用 html 和 javascript 驗證動態 select DropDown？
[英]How to validate dynamic select DropDown using html and javascript?
如何使用CSS將CSS屬性應用於動態生成的HTML？
[英]How can I apply CSS properties to dynamic generated HTML with JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.