How to replace and append with Javascript

Question

I have a comment system in which I want to realize inline-editing (when someone knows a good plugin or something similar please don't hesitate to give me a name) and found a Javascript snippet which replaces the text with a textarea and the text as the value of that textarea.

But now I need to add a button (submit button) to that textarea so that the user could save the text he edited.

My code looks now like

<span id="name">comment</span>

<div onclick="replacetext();">test</div>

<script type="text/javascript">
    function replacetext(){
            $("#name").replaceWith($('<textarea>').attr({ id: 'name', value: $('#name').text() }));
    </script>

I've tested it out with $("#name").append('<button>yes</button>'); but it didn't work.

Aside from a missing } in your example, it works fine here jsfiddle.net/j08691/adb8X — j08691
– j08691, Commented Dec 2, 2012 at 15:15
thanks but what code is required to add an extra button? jsfiddle.net/ZaEDw is not working — John Brunner
– John Brunner, Commented Dec 2, 2012 at 15:23
A better approach would be use .show(), and .hide() to display the TEXTAREA instead of the DIV. Or alternatively, have a class name on BODY which controls display of various elements on the page, and then set this class. — Šime Vidas
– Šime Vidas, Commented Dec 2, 2012 at 15:59

Ivor · Accepted Answer · 2017-03-17 04:40:05Z

The solution can be tried out using the following jsFiddle: http://jsfiddle.net/adb8X/5/

The line I believe you are after is:

  $('<button>yes</button>').insertAfter("#name");

The code above inserts a newly created DOM element (yes) right after the DOM element with the specified id in the target selector ("#name").

More about insertAfter here: http://api.jquery.com/insertAfter/

If you want to insert it into replacetext(), it will become:

function replacetext() {
    $("#name").replaceWith($('<textarea>').attr({
        id: 'name',
        value: $('#name').text()
    }));

    $('<button>yes</button>').insertAfter("#name");

}

Note: I also corrected your jsFiddle. Please check here: http://jsfiddle.net/adb8X/5/ (There were problems with the settings and a small typo if I recall correctly). The corresponding line in that is:

 $("#name").append( $('<button>hi</button>') );

Wap · Accepted Answer · 2012-12-02 19:06:06Z

function replacetext() {

    $("#name").replaceWith($('<textarea>').attr({
        id: 'name',
        value: $('#name').text()
    }));
   $('#name').after('<button id="test">test</button>');
}

$('#test').live("click",function(){
   alert("I am a newly-created element and .click won't work on me.");

});

You can't use .append() in a textarea because you can't "insert content" or append to it (there are other workarounds for that). You can do that in DIV, paragraph tag, or whatever that can act as a container.

http://api.jquery.com/append/
http://api.jquery.com/after/
http://api.jquery.com/live/ or .on() http://api.jquery.com/on/

Aatif Farooq · Accepted Answer · 2012-12-02 16:54:54Z

1

Here is the working code.

<span id="name">comment</span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<div onclick="replacetext();">test</div>

<script type="text/javascript">
    function replacetext(){
            $("#name").replaceWith($('<textarea>').attr({ id: 'name', value: $('#name').text() }));
            $('#name').after('<input type="submit" />');
    }
    </script>

Accept it as answer if it works

answered Dec 2, 2012 at 16:54

Aatif Farooq

1,8561 gold badge14 silver badges15 bronze badges

Comments

InspiredBy · Accepted Answer · 2012-12-02 18:49:10Z

Another option that will let you replace labels that are generated dynamically, not just the one with the static id = "Name" for example:

html for a label or an anchor link in this example to be replaced with textbox:

<a href="#" onclick="editOpen(this);">@Html.DisplayFor(modelItem => Model.Name)</a>|

Javascript ( inside of the editOpen function)

function editOpen(ctrl) {
   //textbox
    var editText = $('<input>').attr({
        type: 'text',
        value: $(ctrl).text()
     });

    //edit button
    var saveEditLink = $('<input>').attr({value:'Save',type:'button'});

    //Put them together
    $(ctrl).replaceWith($(editText).after($(saveEditLink)));

}

thank you very much for your answer which was very interesting (also for future projects).

Collectives™ on Stack Overflow

How to replace and append with Javascript

4 Answers 4

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Linked

Related