jqeuryでinputをtextareaに変更する方法

jQueryでボタンをクリックした時に指定したinputをtextareaに変更することはできるのでしょうか？

jQuery
1
2$(document).on('click', '.btn1', function() {
3
4    $('#hennkou').html('<textarea></textarea>');
5
6
7});
8

HTML
1<button id="btn1">ボタン</button>
2
3<input id="hennkou">

上記のようなコードを試してはみたのですがうまくいかず困っています。
何かご教授いただければ幸いです。よろしくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

消して追加するのが一番早いと思います。

HTML
1<html lang="ja">
2<head>
3<meta charset="utf-8"/>
4<script src="jquery-3.4.1.min.js"></script>
5<script>
6$(document).on('click', '#btn1', function() {
7    $('#hennkou').remove();
8    $('#btn1').after('<textarea id="hennkou"></textarea>');
9});
10</script>
11</head>
12<body>
13    <button id="btn1">ボタン</button>
14    <input id="hennkou">
15</body>
16</html>

投稿2020/02/05 10:52

yureighost

総合スコア2183

parapra

2020/02/05 13:11

これだとボタンのところに追加されてしまいませんか？

yureighost

2020/02/05 13:20

afterなのでbutttonタグの次に追加されます。ブラウザのデベロッパーツールでDOMの構成を見ながら動作させてもらえば、 inputと入れ替わって追加されるのがわかると思います。

parapra

2020/02/05 13:24

動作を確認したところ思っていた通りの動きをしてくれました。ありがとうございます。

行動規範の内容に同意します

replaceWithメソッドを使うのがシンプルかと。

js
1$(document).on('click', '#btn1', function() {
2    $('#hennkou').replaceWith('<textarea id="hennkou"></textarea>');
3});

html
1<button id="btn1">ボタン</button>
2<input id="hennkou">

ボタンをクリックするたびに、input と textarea が交互に切り替わる場合のコード例

js
1$(document).on('click', '#btn1', function() {
2  let tar = $("#hennkou");
3  let tag = (tar.prop("tagName") === 'INPUT') ?
4      '<textarea id="hennkou"></textarea>' : '<input id="hennkou">';
5  tar.replaceWith(tag);
6});