How to display a Save icon button on an inline text editing placeholder

Question

How to add a save button something like this

<a class="btn btn-xs btn-default" href="#" ><i class="fa fa-check"></i></a> 

on an inline text edit filed.

I want to add above textbox just to the right side of the input filed so that onclick of it, it will save the texts to the span.

Also is it possible the icon will visible on-mouse hover to .editableTextbox?

 $(function() { $(".editableTextbox").each(function() { var t = $(this); t.after("<input type = 'text' style = 'display:none' />"); var i = $(this).next(); i[0].name = this.id.replace("lbl", "txt"), i.val(t.html()), t.click(function() { $(this).hide(), $(this).next().show() }), i.focusout(function() { $(this).hide(), $(this).prev().html($(this).val()), $(this).prev().show() }) }) }); 

 .editableTextbox{padding: 2px; border:1px solid #CCC;} .hiddencontrol{ display: none; } .showcontrol:hover .hiddencontrol{ display : block; } .editableTextbox:hover {cursor: pointer; background-color: #D9EDF8; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="editableTextbox"> Rename me </span> 

Answer 1

You can use .append() method to insert the specified content as the last child of each element.

 $(function() { $(".editableTextbox").each(function() { var t = $(this); t.after("<input type = 'text' style = 'display:none' />"); var i = $(this).next(); i[0].name = this.id.replace("lbl", "txt"), i.val(t.html()), t.click(function() { $(this).hide(), $(this).next().show() }), i.focusout(function() { $(this).hide(), $(this).prev().html($(this).val()), $(this).prev().show() $(".editableTextbox").append("<a class='btn btn-xs btn-default' href='#'><i class='fa fa-check'></i></a>"); }) }) }); 

 .editableTextbox { padding: 2px; border: 1px solid #CCC; } .hiddencontrol { display: none; } .showcontrol:hover .hiddencontrol { display: block; } .editableTextbox:hover { cursor: pointer; background-color: #D9EDF8; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <span class="editableTextbox"> Rename me </span>