javascript - 在 texbox 将其放入之前/之后追加 div

Question

我有这个代码

ASPX

<asp:TextBox ID="NewComent" TextMode="MultiLine" onkeyup="textEdit(this);" runat="server"></asp:TextBox>

JS

function textEdit(Inputelement) {
    var count = Inputelement.value.length;
    var newElement = document.getElementById(Inputelement.id + "_123");
    console.log(newElement);
    if (newElement == null) {
        newElement = document.createElement('div');
        newElement.setAttribute('id', Inputelement.id + "_123");
        newElement.innerHTML = (350 - count) + " letters left";
        Inputelement.insertBefore(newElement, Inputelement.parent);
        //Inputelement.appendChild(newElement);
        console.log("Inner");
    }
    else {
        newElement.innerHTML = (350 - count) + " letters left";
        console.log("Outer");
    }
}

该代码应该采用一个教科书并在其下方添加一个计数器。但这是问题所在。它将 div 放置在其内部，使其不可见。

输出(检查器)

<textarea name="ctl00$MainContent$QandA$ViewQA$QAListView$ctrl0$ViewQAComment$NewComent" rows="2" cols="20" id="MainContent_QandA_ViewQA_QAListView_ViewQAComment_0_NewComent_0" onkeyup="textEdit(this);">
    <div id="MainContent_QandA_ViewQA_QAListView_ViewQAComment_0_NewComent_0_123">344 letters left</div>
</textarea>

使用insertBefore和appendChild都会导致同样的问题，至少在Opera上(基本上是Chrome)。所以我来了，有什么想法吗？

Answer 1

类似的问题已经得到解答(link to answer) .

通过使用 appendChild() 的方式，您将 newElement 作为子元素附加到 Inputelement 内。除了现有的答案之外，用以下代码替换 insertBefore() 行也应该有效:

Inputelement.parentNode.insertBefore(newElement, Inputelement.nextSibling);