如何使用本機JavaScript將跨度動態添加到輸入字段

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

您不能對input節點進行.appendChild()任何操作，因為input不能有任何后代。

相反，您應該在新節點或類似節點之后插入新節點。

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

演示： 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>

因此，您需要在輸入元素之前或之后插入跨度。 這是一個向您展示如何的答案。

Answer 3

我認為您的問題是您正在嘗試將跨度作為輸入的子項而不是同級項（我認為這是您真正想要的）追加。

我不確定沒有看到您的實際HTML，因為我不知道您的輸入在DOM中的位置，但是如果它們具有單獨的父元素，那么您將替換：

inputNode.appendChild(spanTag);

。 。 。 與

inputNode.parentNode.appendChild(spanTag);

編輯：僅供參考，斜視下面給出的代碼（ inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling); ）將是如果所有輸入都在同一父元素下的方法。 這完全取決於DOM結構的設置方式。