Javascript DOM控制台瀏覽器

Question

我嘗試了許多解決方案，但似乎對我不起作用，有人可以幫助我解決問題嗎？

我想將GPS Fleet Management System的值更改為textarea 。

這是我的代碼：

<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

更改value到html中，添加e.preventDefault()並更改#caption選擇到.caption ：

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

Answer 2

一種不同的方法可能是：

 $(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

使用e.preventDefault()防止默認的click事件，要獲取textarea值，請使用textarea.val(); e.preventDefault()

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

如果要用文本區域替換div，請使用http://api.jquery.com/replaceWith/ 。 您的var textbox = $("#caption"); 應該是.caption因為您的元素包含標題類別，而不是ID。

textbox.replaceWith(textarea);