如何使用本机javascript动态地将Span附加到输入字段

Question

我的页面中有5个输入框。我想检查是否有任何字段为空白，我将使用附加到该输入字段的span标记显示错误消息。

这是我的代码：

function validateForm() {   
// Declare all the local variable
var inputElements, inputId, inputType, i, inputLength, inputNode;

// Get all the input tags
inputElements = document.getElementsByTagName("input"); 

for(i = 0, inputLength = inputElements.length; i < inputLength; i++) {
    inputId = inputElements[i].id; // Get the input field ID
    inputType = inputElements[i].type; // Get the input field type

    // We will ONLY look for input[type=text]
    if(inputType === "text") {
        inputNode = document.getElementById(inputId);
        if(inputNode.value === "") {
            var spanTag = document.createElement("span"); 
            spanTag.innerHTML = inputFieldBlankErrorMessage;
            console.log(inputNode.appendChild(spanTag));
        }
    }       
}
return false; // Do Nothing

}

这就是我得到的

它应该在输入标记之后追加。我得到一个我不需要的奇怪标签。请帮忙!!!

Answer 1

.appendChild()节点不能input，因为input没有后代。

相反，您应该在它之后插入新节点或类似的东西。

inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);

DEMO： http://jsfiddle.net/hMBHT/

Answer 2

简单地说，你不应该将任何元素附加到输入元素。

你可能想要的是这样的：

<div class="field">
  <input type="text" name="bla"/>
  <span class="error">This field can't be blank!</span>
</div>

因此您需要在输入元素之前或之后插入范围。 Here is an answer that shows you how.

Answer 3

我相信你的问题是你试图将跨度作为输入的子附加，而不是兄弟（我相信，这是你真正想要的）。

如果没有看到您的实际HTML，我无法确定，因为我不知道您的输入如何位于DOM中，但如果它们具有单独的父元素，那么您将替换：

inputNode.appendChild(spanTag);

。 。 。与

inputNode.parentNode.appendChild(spanTag);

编辑：仅供参考，如果所有输入都位于同一父元素下，则斜视下面提供的代码（inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);）将是您如何做到的。这一切都取决于DOM结构的设置方式。