Append div before/after texbox places it within

Question

I have this code

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

The code is supposed to take a textbok and add a counter below it. but here is the catch. It places the div inside of it making it non visual.

Output (inspector)

<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>

Using insertBefore and appendChild both result in the same problem, at least on Opera which basically is Chrome. So here i am, any ideas?

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

A similar question has been already answered (link to answer).

With the way that you are using appendChild() you are appending newElement as a child element inside of Inputelement. Apart from the existing answer, replacing the insertBefore() line with the following code should also work:

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

edited May 23 '17 at 12:11

Community

1
1

answered Aug 11 '14 at 23:39

Kootoopas

66
1
6

That worked. nice little hack calling the parent and then digging down. – Thomas Andreè Wang Aug 11 '14 at 23:48

score 2 · Answer 2 · answered Aug 11 '14 at 23:49

That should fix it:

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

See fiddle:

http://jsfiddle.net/tc7qsaaL/

score 0 · Answer 3 · answered Aug 11 '14 at 23:37

0

jQuery's insertBefore does insert the element before, however plain old javascript has an insertBefore method as well which inserts it inside the element.

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

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

answered Aug 11 '14 at 23:37

ChrisGheen

984
6
17

Fancy js speciffic thing then :) ty for the explanation. – Thomas Andreè Wang Aug 11 '14 at 23:47

Append div before/after texbox places it within

3 Answers3