CODEWITHSUNDEEP
javascriptjquery
varuog
varuog

Reputation: 3081

appending span is not working

 form=jQuery("<form>"
            ,{
                "method":"post"
                ,
                "action":node.get("inline-edit-target")

            }
            );


        $(node).after(form);
        //console.log($(node).html());

        fieldNode=$(node).find(".inline-edit-field");
        console.log(fieldNode.length);
        fieldNode.each(function(index,elem)
        {
            console.log($(elem).data("field-name"));

            $(form).append("<span>").html($(elem).data("field-name"));
            $(form).append("<input>"
                ,{
                    "type":"text"
                    ,
                    "name":$(elem).data("field-name")
                    ,
                    "value":$(elem).text()
                });       
        }
        );

Its basically check the DOM and prepare a form. form parses two fields correctly (fieldNode.length produce correct number). It also prints the nodes correctly untill i added the span tag. Why it is not working?

Upvotes: 1

Views: 1264

Answers (1)

David Thomas
David Thomas

Reputation: 253308

The problem, if it's the only problem, is this line:

$(form).append("<span>").html($(elem).data("field-name"));

And stems from the fact that append() returns the original element to which the new element was appended, not the new element itself (proof of concept).

So you're appending a span and then immediately over-writing the HTML of the parent div to whatever the $(elem).data('field-name') returns.

Also, you'll have a problem with the immediately-following line, since jQuery won't (or can't) create an element using an object, with append (proof of failure), instead you have to use a string of html, such as, in your case:

$(form).append('<input type="text" name="' + $(elem).data('field-name') + '" value="' + $(elem).text() + '" />');

Or (and this is perhaps easier):

$(form).append($("<input />" ,{
    "type" : "text",
    "name" : $(elem).data("field-name"),
    "value" : $(elem).text()
}));

Upvotes: 2

Related Questions