Javascript 如何清除跨域的innerHTML

我有一个html的基本表单，当用户留下空白字段时，我会以我通过javascript创建的跨距显示一条消息，到目前为止还不错。但是，如果我一次又一次地点击“提交”按钮，消息就会在已经打印的消息上方一次又一次地打印，我的意思是重叠

我尝试了element.innerHTML=''；和。也许我实施得很糟糕，因为它不起作用

var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');

myForm.addEventListener('submit', function(){
  event.preventDefault(); 
    var statusMessageHTML = [];     
    // create empty spans
    for(i = 0; i < formFields.length; i++){
      statusMessageHTML[i] = document.createElement('span');
        statusMessageHTML[i].className = 'status-field-message';
      formFields[i].appendChild(statusMessageHTML[i]);     
    }
    // print a string in empty spans
    for(i = 0; i < formFields.length; i++){
      statusMessageHTML[i].innerHTML = "Error Message"
    }      
  return false;
});

var myForm=document.getElementsByTagName（'form'）[0]；
var formFields=document.getElementsByTagName（'label'）；
myForm.addEventListener（'submit'，function（）{
event.preventDefault（）；
var statusMessageHTML=[]；
//创建空跨距
对于（i=0；i

PD：我想用纯javascript解决这个问题

---

为了防止出现这种情况，您可以提前创建并附加这些

span

s，并在单击提交按钮时修改它们的文本

例如，按如下方式重新排列代码：

var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');

// create empty spans in advance
var statusMessageHTML = [];
for(var i = 0; i < formFields.length; i++) {
  statusMessageHTML[i] = document.createElement('span');
  statusMessageHTML[i].className = 'status-field-message';
  formFields[i].appendChild(statusMessageHTML[i]);
}

myForm.addEventListener('submit', function(event) {
  event.preventDefault();
  
  // change the text of spans
  for(var i = 0; i < formFields.length; i++)
    statusMessageHTML[i].textContent = 'Error Message';
});

并在收到响应时重写这些值（可能包装在回调函数中，因为这是一个AJAX请求）：

函数回调（响应）{
对于（变量i=0；i

谢谢你的回答@Microloft这是防止这种情况发生的唯一方法吗？一般来说，我是新手，如果我错了，请纠正我。我更愿意将创建代码保存在submit函数中，因为这种方法只在用户提交表单时创建跨距（在此之前不需要这些跨距），这样初始页面加载将稍微。。。。更快？我是说，就一点点。这就是为什么我宁愿只在有用的情况下创建这些跨距（当用户提交表单时显示错误表）的原因。我明白你的意思，但我仍然不清楚你想要实现什么。如果多次单击“提交”按钮，您是要删除现有的

span

s并创建一个全新的集合，还是跳过该部分？如果用户最终提交成功，您是否也要删除那些现有的

span

s？理想情况下，我只希望在从php发送错误消息时创建span，但是我还需要在js中进行验证，对吗？对于这个表单，我更喜欢只使用php和ajax（我知道我的代码中没有，我只是以“错误消息”为例来保存行）。因此，为了回答这个问题，如果多次单击submit按钮，我想首先清除跨距的innerHTML，然后在跨距中重写ajax请求返回的值（目前，如果我的php检测到没有错误，只发送一个空字符串。顺便说一句，我不知道这是否是一个好的做法）。感谢@Microloft的帮助，现在它正按我希望的那样工作。也谢谢你的建议。

var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');
var statusMessageHTML = [];
var isFirstSubmit = true;

myForm.addEventListener('submit', function(event) {
  event.preventDefault();

  if(isFirstSubmit) {

    // create empty spans
    for(var i = 0; i < formFields.length; i++) {
      statusMessageHTML[i] = document.createElement('span');
      statusMessageHTML[i].className = 'status-field-message';
      formFields[i].appendChild(statusMessageHTML[i]);
    }
    
    isFirstSubmit = false;
    
  } else {
    
    // clear previous values
    for(var i = 0; i < formFields.length; i++)
      statusMessageHTML[i].textContent = '';
      
  }
});

function callback(response) {
  for(var i = 0; i < formFields.length; i++)
    statusMessageHTML[i].textContent = /*values in response*/;
}