JasonWyatt

Use jQuery to Make Your DOM Editable!

I was playing around with jQuery a bit last night on my flight from Raleigh to Tampa and put together a pretty cool little piece of code that will let you click any paragraph on the page and edit it in place. I’d say it needs some more work before it could be a plugin (for example, adding functionality to support updates to the server), but it’s not too bad:

<script type="text/javascript" src="./jquery-1.3.2.js" charset="UTF-8"></script>
<script type="text/javascript">
    // <!--
    $(document).ready(function(){
        $("p").live("click", function(){
            var node = $(this);
            var html = node.html();
            
            var editNode = $('<textarea/>');
            editNode.text(html);
            editNode.css('display', node.css('display'));
            editNode.width(node.width());
            editNode.height(node.height());
            editNode.blur(function(){
                node.html($(this).attr("value"));
                $(this).before(node);
                $(this).remove();
            });
            
            node.before(editNode);
            editNode.focus();
            node.remove();
        });
    });
    // -->
</script>

You can see it in action on the demo page.