Javascript DOM 控制台浏览器

Question

我尝试了许多解决方案，但它似乎对我不起作用，任何人都可以帮助我如何解决我的问题？

我想将 GPS 车队管理系统值更改为 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

如果要将div 替换为文本区域，请使用 http://api.jquery.com/replaceWith/。您的var textbox = $("#caption");应该是.caption的，因为您的元素包含一类标题，而不是 ID。

textbox.replaceWith(textarea);

Answer 4

使用e.preventDefault()来阻止默认的点击事件，要获取文本区域值，请使用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); 
});