How to iterate through all textarea tags and add a node after them?

Question

I'm not a jquery developer and I'm not much of a javascript developer too. I'm trying a quick hack that makes my life simple. This is the page:

What I'm trying to accomplish is:

1. I want to add a div of mathjax_preview class after each textarea element on the page.
2. The inner.HTML of that div must the text inside the corresponding textarea

But it doesn't seem to work.

I've the following javascript code in js/1.js and it is being loaded when the page loads:

var preview_number = 0;
$("textarea").each(function() { 
    var d = $(this).next();
    if (!d.hasClass("mathjax_preview")) {
      preview_number++;
      var d = $("<div class='mathjax_preview' " +
         "style='padding: 5px; color: black; background: #eee; border: 1px solid #888;float:left;'" +
         "></div>");
      d.attr("id", "mathjax_preview_" + preview_number);
      d.insertAfter(this);
    } 
    d.text($(this).val());
    MathJax.Hub.Queue([ "Typeset", MathJax.Hub, d.attr("id") ]);
});

EDIT:

I just inserted following snippet in the beginning of the above file:

var preview_number = 0;
var elements = document.getElementsByTagName("textarea");
  alert(elements.length);

Its alerting 0 . How come?

Answer 1

Try the following (I've not tested this as it's straight off the top of my head):

$(document).ready(function() {
    var preview_number = 0;

    $("textarea").each(function() { 
        preview_number++;

        var d = document.createElement("div");
        $(d).attr("id", "mathjax_preview_" + preview_number);
        $(d).addClass("mathjax_preview");
        $(d).css("padding", "5px");
        $(d).css("color", "black");
        $(d).css("background", "#eee");
        $(d).css("border", "1px solid #888");
        $(d).css("float", "left");
        $(d).html($(this).val());

        MathJax.Hub.Queue([ "Typeset", MathJax.Hub, $(d).attr("id") ]);

        $(this).append(d);
    });
});

Answer 2

The variable textarea does not exist. Use this instead:

d.insertAfter(this);

Answer 3

You have no textarea variable defined.

d.insertAfter(textarea);

I beleive you can use $(this) reference.

d.insertAfter($(this));

Answer 4

What is textarea in d.insertAfter(textarea); ?

It seems to be d.insertAfter($(this)); .

Answer 5

The alert message is showing you zero because you have not put your javascript file at the end of page nor you have used ready callback. To use ready callback add the code as follows

$(document).ready(function() {/*add your javascript code here */});