为什么innerHTML不起作用？ （当textContent工作时）

Question

我正在尝试从书中实现一些示例，我无法强制使用 innerHTML 的代码（但 textContent 正在运行）：

function checkLength(e, minLength) {      
  var el, elMsg;
  if (!e) {
    e = window.event();
  }  
  el=e.target || e.srcElement;
  elMsg =el.nextSibling;
  if (el.value.length<minLength) {
    //elMsg.textContent="Username must be " + minLength +" characters or more";    
      elMsg.innerHTML='Username must be ' + minLength + '' characters or more'';    //why are you not working?????
  }     
}

...

完整代码为here

UPD。 此错误"elMsg.innerHTML='Username must be ' + minLength + '' characters or more''; - 类型错误，抱歉，伙计们，没有注意到它

Answer 1

您的代码很好，因为我发现存在轻微错误

elMsg.innerHTML='Username must be ' + minLength + '' characters or more''; 

这将生成语法错误，因此请将此替换为

 elMsg.innerHTML='Username must be ' + minLength + ' characters or more'; 

您正在使用el.nextSibling，这是错误的，您将使用

nextElementSibling so

替换

el.nextSibling

带

  el.nextElementSibling

现在再做一次改变

el.nextElementSibling将返回您的用户名字段中的下一个元素，即您的案例中的br标记。你将不得不放置一个具有innerHTML属性的元素。 所以替换

 <input type="text" id="username"/>
  <br/>

与

 <input type="text" id="username"/>
<span></span>
  <br/>

我希望这会有所帮助。如果没有，请告诉我，我会为你创建一个jsfiddle。

Answer 2

好的我得到了确切的问题。您的elMsg =el.nextSibling;不是textNode元素。在textNode innerHTML上无效。

使用下面的代码，它会起作用。

<input type="text" id="username"/><p></p>

现在您的elMsg将成为一个元素，您可以在其上使用innerHTML。

Updated Fiddle

你的代码也有错误。

elMsg.innerHTML='Username must be ' + minLength + '' characters or more'';应该是 elMsg.innerHTML='Username must be ' + minLength + ' characters or more';