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");
    }
}

代码应该采用textbok并在其下面添加一个计数器。但这是捕获。它将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);

Answer 2

应该解决它：

textEdit = function(Inputelement) {
    var count = Inputelement.value.length;
    var newElement = document.getElementById(Inputelement.id + "_123");
    if (newElement == null) {
        newElement = document.createElement('div');
        newElement.setAttribute('id', Inputelement.id + "_123");
        newElement.innerHTML = (350 - count) + " letters left";

        Inputelement.parentNode.appendChild(newElement, Inputelement)
   }
   else {
        newElement.innerHTML = (350 - count) + " letters left";
   }
}

见小提琴：

http://jsfiddle.net/tc7qsaaL/

Answer 3

jQuery的insertBefore之前插入了元素，但普通的旧javascript也有insertBefore方法，并将其插入元素中。

Javascript：http://www.w3schools.com/jsref/met_node_insertbefore.asp

jQuery：http://api.jquery.com/insertbefore/

在文本框放置之前/之后追加div

3 个答案: