javascript - 在 Javascript 中创建动态 CSS

Question

我正在尝试为 Google map 创建一个信息窗口，并且需要生成一个动态表单来显示信息。

以下脚本生成一个名为“No_found_err: DOM exception 8”的错误:

//create objects for HTML elements              
var inputElement1 = document.createElement("input");
var inputElement2 = document.createElement("input");

//assign different attributes to the element
inputElement1.setAttribute("type", "text");
inputElement1.setAttribute("id", "poiName");
inputElement2.setAttribute("type", "textarea");
inputElement2.setAttribute("id", "poiDesc");

//create style tag, atrributes and values
//add css style to head tag and define classname for HTML "desctag" element
var cssNode = document.createElement("style");
cssNode.setAttribute("type", "text/css");
cssNode.style.cssText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

document.getElementsByTagName("head")[0].appendChild("cssNode");
document.getElementById("poiDesc").className = "cssClass";

var formString = "<b>Enter location details:</b>
<p>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
"&nbsp;&nbsp;&nbsp;" + inputElement1 + "<br>Description:&nbsp;&nbsp;" + inputElement2 +
"<p><center>" + "<input type='button' id='saveBtn' value='Save' onclick='savePOI()'>  
</center>";

//insert values into the form elements      
document.getElementById("poiName").value = locList[i].name;
**document.getElementById("poiDesc").value = locList[i].desc;**

此错误出现在最后两行之间。这是否意味着尚未创建标签 ID“poiName”和/或“poiDesc”？

如何解决上述问题？

谢谢。

Answer 1

document.getElementsByTagName("head")[0].appendChild("cssNode"); 应该是 document.getElementsByTagName("head")[0].appendChild(cssNode) ; 注意 cssNode 没有被引用，你传递了一个字符串来附加 Child 而不是节点。

inputElement1 和 inputElement1 是不是字符串的元素，因此将它们附加到 html 字符串不会产生所需的结果。此外，您永远不会将它们或 html 字符串添加到 dom，因此 document.getElementById 将无法找到它们。