Question

How can you transfrom this from jquery library into pure javascript?

function appendText(){
    var text = $("#text").val();

    if ( $("#text").val() ){
    var textArea = "<div class='divex'> <li style='list-style-type:none;' id='t"+counter+"'>"+text+"</li><button id='b"+
    counter+"'name='t"+counter+"' >edit</button></div>";    
    $("#text").val();
    $("#addedText").after(textArea);
    $("#t"+counter).clear;    
    $("#t"+counter).attr('readonly','readonly');
    $("#b"+counter).bind('click',makeAreaEditable);
    $("#text").val('');
    $('.divex').sortable();                                                 
    counter++;
    }
    else{
    }   
};  

for the start i tried something like this:

var counter=0;
function appendText(){
    var text = document.getElementById('text');

    if ( document.getElementById('text').value ){
    var textArea = "<div class='divex'> <li style='list-style-type:none;'id='t"+counter+"'>"+text+"</li><button id='b"+
    counter+"'name='t"+counter+"' >edit</button> </div>";

    var texty = document.getElementById('addedText').appendChild(textArea);

but i have some problems.

I think i didn’t atribue the text to the list corectly.. Here is what
i’ve got so far:

 var counter=0;
    function appendText(){

        var text = document.getElementById('text').value;

        if ( document.getElementById('text').value ){   
        var div = document.createElement('div');
        div.class = 'divex';
        var li = document.createElement('li');

        div.appendChild(li);
        document.createTextNode(text);

        var bigdiv = document.getElementById('addedText');
        bigdiv.appendChild(text);

        counter++;
        }
        else{
        }   
    };

Answer 1

.appendChild() expects a DOM element, not a HTML string like you have in your textarea variable.

You have to use document.createElement first, something like:

var div = document.createElement('div');
div.class = 'divex';
var li = document.createElement('li');
div.appendChild(li);
// etc.

Then use document.createTextNode() to create the text inside the li-element. And so on..