生成新 XHTML 内容的 Javascript 不起作用答案

【问题标题】：Javascript to generate new XHTML content not working生成新 XHTML 内容的 Javascript 不起作用
【发布时间】：2014-01-08 10:52:27
【问题描述】：

这几天我一直在摸不着头脑，我在网上甚至找不到教授的任何解决方案。

我正在开发一个系统，该系统需要一些页面能够在运行时动态生成新的 HTML 内容（在 glassfish4 服务器上运行的 JSF Web 项目）我找到了一些有关如何执行此操作的资源，但它仅在标准 HTML 页面上运行时才有效。当我将它转换为 XHTML 标准时，该函数不再生成任何东西（尽管它仍在被调用，但警告框确认了这一点）。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html   xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1"></meta>
<title>Insert title here</title>
</head>
<body>
    <SCRIPT type="text/javascript">
        function addQuestion() {
            alert('yay');
            var exam = document.getElementById('divarea');
            var temp = document.createElementNS('h', 'button');
            temp.setAttribute('value', 'child');
            exam.appendChild(temp);
        }
    </SCRIPT>
    <div id="divarea">
    </div>
    <h:commandButton value="create new stuff" onclick="addQuestion()"/>
</body>
</html>

如果有人能对这个问题有所了解，将不胜感激。

附：以下是我用来尝试进行故障排除的资源。

Converting javascript to work with XHTML

Creating elements dynamically using javascript

【问题讨论】：

JSF+Facelets 在服务器中运行，基于 XHTML 源代码生成 HTML 输出，并将 HTML 输出发送到客户端（网络浏览器）。 JavaScript 在客户端运行并在基于从服务器检索的 HTML 源创建的 HTML DOM 树上工作。想一想这件事，直到当你终于真正理解某事时，你的肾上腺素激增。这是 Web 开发 101。也借此机会将鼠标光标放在您放置在问题下方的 [xhtml] 标记上，直到出现黑色信息框，然后单击其中的 info 链接以获取更多信息信息。
注意：对于第一个参数，您应该指定完整的命名空间 URI：document.createElementNS('http://java.sun.com/jsf/html', 'button')。你可以找到good documentation on MDN。正如 BalusC 所说，这不会帮助您解决这里的问题。
你确定它现在真的是 XHTML 吗？ XHTML 区分大小写，因此您的源代码包含一个未知元素<SCRIPT>，浏览器不知道如何处理它。作为测试，我将您的源代码保存为 .xhtml 文件，它会在屏幕上显示 <SCRIPT> 元素的内容，而不是运行脚本。

标签： javascript html jsf primefaces xhtml

【解决方案1】：

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html   xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html">
        <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1"></meta>
        <title>Insert title here</title>
        </head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <body>
            <SCRIPT type="text/javascript">
                function addQuestion() {


                    var oldcon=$("#divarea").html();
                    var newcon='<button>child</button>';
                    var updcon=oldcon+newcon
                    console.log(newcon);
                    $("#divarea").html(updcon);
                }
            </SCRIPT>
            <div id="divarea">
            </div>
            <button onclick="addQuestion()"/>dff</button>
        </body>
        </html>

【讨论】：

感谢您的回复，但还是不行。