テキストエリアからdivにテキストを追加する

ユーザーがテキストを入力できる簡単なエディタを作成しようとしています。編集ボタンを押すと、そのテキストがid="textArea"の末尾に追加されます。テキストエリアにテキストを入力した後で編集ボタンを押すと何も起こりません。テキストエリアからdivにテキストを追加する

私が間違っていることやこれを行うためのよりよい方法を指摘できる人は、私はそれを感謝するだろう、私はそれを行う他の方法を見たが、私はちょうどこの方法が動作していない。ありがとう。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://d3js.org/d3.v3.min.js"></script> 

    <script> 
    function edit(){ 

     var editorText = document.getElementById("editor").value; 
     $("#textArea")append("editorText"); 
     } 
    </script> 
</head> 

<body> 
    <div> 
<form> 
    Text Editor 
<br/> 
    <textarea id="editor"> 
    </textarea> 
<br/> 
    <input type="submit" value="Edit" onclick="edit()"> 
</form> 
    </div> 
<br> 

    <div id="textArea"> 

<h2><a name="year1"></a>Document</h2> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet nisl velit, at elementum enim blandit in. Suspendisse sit amet posuere ex. Donec sit amet commodo nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae tincidunt metus. Suspendisse ex ligula, placerat convallis varius in, placerat et ipsum. Pellentesque et neque nec nisl consectetur fringilla ut tristique ligula. Aliquam in sem turpis. 
</p> 
    </div> 
</body> 
</html>

EDIT：私はまだいくつかの提案に従うと、運がなかった。ここで私が使用しようとしている新しいコードです。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://d3js.org/d3.v3.min.js"></script> 

    <script> 
    function edit(){ 
$("#editor").append("editorText"); 
} 
    </script> 
</head> 

<body> 
    <div> 
<form> 
    Text Editor 
<br/> 
    <textarea id="editor"> 
    </textarea> 
<br/> 
    <input type="button" value="Edit" onclick="edit()"> 
</form> 
    </div> 

<br> 

    <div id="textArea"> 

<h2><a name="year1"></a>Document</h2> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet nisl velit, at elementum enim blandit in. Suspendisse sit amet posuere ex. Donec sit amet commodo nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae tincidunt metus. Suspendisse ex ligula, placerat convallis varius in, placerat et ipsum. Pellentesque et neque nec nisl consectetur fringilla ut tristique ligula. Aliquam in sem turpis. 
</p> 
    </div> 
</body> 
</html>

出典

2016-04-23 user3352763

'src'属性を持つスクリプトタグ内にJSコードを置くことができないので、2つの別々の'

変更、ボタンや編集機能を

<input type="button" value="Edit" onclick="edit()"> 

function edit(){ 
    $("#editor").append("editorText"); 
}

出典

2016-04-23 20:04:25

編集ボタンを押すと何も起こりません。私はあなたのコードが正しいと確信しています、私は答えに記載されているすべての提案を試してみましたが、私はボタンとテキストボックスを参照してください、それらの誰もdiv内のテキストを編集しました。 – user3352763

textareaのテキストを変更する場合は、.append（）ではなく.text（）を使用する必要があります。 $（ "＃editor"）を試してください。text（ "editorText"）; –

以下のようにあなたが要素にテキストエリアのテキストコンテンツを追加することはできません。代わりにそれを行うのは、この方法を試してください。jQueryの

$('input[type="submit"]').click(function(){ 
    $('#textArea').text($('#editor').val()); 
});

であること。送信ボタンをクリックすると、id="textArea"のテキストコンテンツは#editorのテキストコンテンツになります。 #editorに入力された要素を<p>This is a paragraph</p>のようにレンダリングする場合は、text()をhtml()に変更できます。

出典

2016-04-24 00:05:04 JTrixx16

テキストエリアからdivにテキストを追加する

関連する問題