Question

There is the following JQuery code:

    $(document).ready(function(){
        $(".translated").mouseenter(function(){
            $(this).html("<input type='text'/>");
        });
    });

And there is the table with many <div class="translated"> items with text in it. I need to replace text in div block to input item by mouseenter event. It works. But I also need to set attributes for input element in the process of replacing, and I don’t know how I can do it because I’m new in JS/JQuery. Please, give me some info. Thank you in advance.

UPDATE: sorry, my attributes is calculated with JS too, it isn’t constant.

UPDATE 2:
Algorithm:
1) Insert input item in div item
2) Change height of the new inserted item

Answer 1

For the record, there’s a special jQuery syntax for element creation.

$("<input/>", {
    type: "text",
    height: 100
}).appendTo(this);

The above inserts an input element with type attribute set to text and height (CSS) set to 100px.

The generated markup appended to the target element is:

<input type="text" style="height: 100px;">