从 JS 添加 HTML 不起作用答案

【问题标题】：Adding HTML from JS doesn't work从 JS 添加 HTML 不起作用
【发布时间】：2015-06-07 13:16:36
【问题描述】：

我正在为颜色选择器使用一些现成的 HTML。当我在 HTML 中添加它时，它可以工作。但是，当我从 javascript（单击按钮后）添加为 innerHTML 时，它不起作用。正如我所看到的，当 HTML 启动时，一些侦听器（或者可能是其他东西）正在自动添加。我能做什么？

代码 JSP：

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Insert title here</title>
      <%--color picker --%>
      <script type="text/javascript" src="jscolor.js"></script>
      <script type="text/javascript">
         function add() {
            document.body.innerHTML += "<input id=\"zaz1\" size=\"5\" class=\"color\" value=\"000000\"> ";
         }
      </script>
   </head>
   <body>
      <input id="zaz" size="5" class="color" value="000000">
      <p onclick="add()">add</p>
   </body>
</html>

【问题讨论】：

请给一些示例代码
那么颜色选择器有方法来初始化小部件吗？如果是这样，您将需要调用它。
与其追加到正文，不如创建一个 div 来包含新内容，并通过类或 ID 引用它？例如：document.getElementById("the-new-div").innerHTML = "value";
试试这个：<p onclick="javascript:add()">add</p> 并在函数 add() 的开头放一个警报，看看函数是否被调用：function add() { alert('called function'); document.body.innerHTML += "<input id=\"zaz1\" size=\"5\" class=\"color\" value=\"000000\"> "; }
我同意格雷厄姆的评论。这不是最好的方法，但是当我把它扔进小提琴和空白页面时，您发布的代码确实将带有 000000 的输入框添加到页面中。那么什么不适合你呢？

标签： javascript html innerhtml listeners

【解决方案1】：

好的，我明白为什么这不起作用。

您需要 jscolor zip 中包含的图像。

所以把 jscolor.js、你的 htlm 文件和所有给定的图像放在同一个文件夹中。

当您在浏览器的开发人员工具中查看控制台时出现此类错误时，我的浏览器会明确告诉我缺少哪些文件。

【讨论】：