Javascript DOM Console browser

Question

I tried many solution but it seems not working for me could anyone help me how to resolve my problem?

I want to change the GPS Fleet Management System value into textarea .

Here is my code:

<div class="caption">
  <i class="fa fa-reorder"></i>GPS Fleet Managment System
</div>
<a href="#" id="change">Change</a>

var textbox = $("#caption");
var textarea = $("<textarea id='textarea'></textarea>");
$("#change").click(function () {
   textbox = textbox.value(textarea);
});

Answer 1

Change value to html , add e.preventDefault() and change the #caption selector to .caption :

var textbox = $(".caption");
var textarea = $("<textarea id='textarea'></textarea>");
$("#change").click(function (e) {
    e.preventDefault();
    textbox.html(textarea);
});

Answer 2

A different approach could be:

 $(function () { var textbox = $("#caption"); var textarea = $("<textarea id='textarea'></textarea>"); $("#change").click(function (e) { var ele = document.getElementsByClassName('caption')[0].childNodes[2]; document.getElementsByClassName('caption')[0].replaceChild(textarea[0], ele); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="caption"> <i class="fa fa-reorder"></i>GPS Fleet Managment System </div> <a href="#" id="change">Change</a> 

Answer 3

use e.preventDefault() to prevent the default click event,to get the textarea value use textarea.val();

var textbox = $(".caption");
var textarea = $("<textarea id='textarea'></textarea>");
$("#change").click(function (e) {
        e.preventDefault();
        console.log(textarea.val());
        //to add the textare to the page use append() or html()
       textbox.append(textarea); 
});

Answer 4

If you want to replace the div with a textarea, use http://api.jquery.com/replaceWith/ . Your var textbox = $("#caption"); should be .caption since your element contains a class of caption, not an ID.

textbox.replaceWith(textarea);