JavaScript新手求助：如何通过表单名称向div写入内容？

嘿，我来帮你捋清楚这个问题——你想用表单名称往div里写入内容，但却碰到了Cannot read property 'innerHTML' of undefined的报错对吧？咱们一步步拆解来看：

错误根源 #

你最后一行代码写了document.forms["achille"].elements[messagesdzs${mycpt}].innerHTML+="okokokok";，这里有个关键误区：表单的elements集合只包含表单控件类元素（比如input、button、select这类），而你创建的div1是普通的div标签，它不属于表单控件，所以不会被纳入elements集合里，这就导致你获取到的是undefined，自然读不到innerHTML属性啦。

修复方案 #

给你几个简单可行的解决方法，按推荐程度排序：

方法1：直接用创建div时的变量（最推荐） #

你在创建div1的时候已经拿到了它的引用，直接用这个变量操作是最高效的，不用再去DOM里重新查找：

// 创建div1的时候
var div1 = document.createElement("div"); 
div1.setAttribute("id", `messagesdzs${mycpt}`); 

// 直接写入内容
div1.innerHTML += "okokokok";

方法2：通过ID直接获取div #

因为你已经给div设置了唯一ID，用getElementById定位非常直接：

document.getElementById(`messagesdzs${mycpt}`).innerHTML += "okokokok";

方法3：从表单对象里查找子元素 #

既然div是表单的子元素，你可以用表单的querySelector方法来定位它：

document.forms["achille"].querySelector(`#messagesdzs${mycpt}`).innerHTML += "okokokok";

完整修改后的代码片段 #

这里把最后一行替换成方法1的写法，顺便帮你去掉了重复设置input1类型的冗余代码：

var mycpt =1; 
var coul = (200+(1+0.5)*mycpt*100); 
var div = document.createElement("div"); 
div.setAttribute("class","title"); 
div.setAttribute("id",`title${mycpt}`); 
div.setAttribute("style","background-color: silver;"); 
div.setAttribute("style","position: absolute;"); 
div.style.border ="1px solid blue"; 
div.style.width="100px"; 
div.style.height="200px"; 
div.style.top="300px"; 
div.style.left=coul+'px'; 
var x = document.createElement("FORM"); 
x.setAttribute("name","achille"); 
x.setAttribute("action", "#"); 
x.setAttribute("id", `chatformsss${mycpt}`); 
x.style.position="relative"; 
x.style.top="70px"; 
var input1 = document.createElement("INPUT"); 
input1.setAttribute("type", "text"); 
input1.setAttribute("name", `usernamee${mycpt}`); 
input1.setAttribute("id", `usernamee${mycpt}`); 
input1.setAttribute("value","salut"); 
input1.style.width="98px"; 
var div1 = document.createElement("div"); 
div1.setAttribute("id", `messagesdzs${mycpt}`); 
// 直接用div变量写入内容
div1.innerHTML += "okokokok";
var input2 = document.createElement("INPUT"); 
input2.setAttribute("type", "text"); 
input2.setAttribute("id", `messagee${mycpt}`); 
input2.setAttribute("placeholder", "Message"); 
input2.style.width="98px"; 
var submit = document.createElement("INPUT"); 
submit.setAttribute("type","submit"); 
submit.setAttribute("name","submit"); 
submit.setAttribute("value","Envoyer"); 
document.body.appendChild(div); 
x.appendChild(input1); 
x.appendChild(div1); 
x.appendChild(input2); 
x.appendChild(submit); 
div.appendChild(x); 

内容的提问来源于stack exchange，提问作者Manu Biguet