jquery copy html from div and paste into a input

Question

i am trying to copy the raw html with a div called #copy_history. I have managed to do it with the text works fine but i require the html as well.

The following does work but its grabbing the text not all the html:

script:

$('#copy').click(function() {
    var text = $('#copy_history').text();
    $('.paste_history').val(text);
});

Input element doesn't accept HTML, it can contain only plain text. — Teemu, Sep 30 '16 at 12:35
Possible duplicate of [jQuery, get html of a whole element](http://stackoverflow.com/questions/3614212/jquery-get-html-of-a-whole-element) — André Dion, Sep 30 '16 at 12:36
@Pete [It doesn't](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). "_Permitted content: Character data_" — Teemu, Sep 30 '16 at 12:38
yes textarea does accept html so dont see why it should not work — alwayslearning, Sep 30 '16 at 12:38
@Teemu Any `input` that accepts text can accept markup... You cannot *render* HTML inside an `input`, but you may enter any text you want. — André Dion, Sep 30 '16 at 12:41
In what format are you wanting the HTML?, in plain text with TAG's etc. Or it having bold / underline visible. — Keith, Sep 30 '16 at 12:43
@Keith Well, reading the post carefully, there's "_trying to copy the raw html_" in the question, i.e. OP wants the markup, ( = "plain text with TAG's" I suppose). I missed this earlier, that's why the previous comments of mine. — Teemu, Sep 30 '16 at 12:47
@Teemu how do you think cms systems work then? - https://jsfiddle.net/L6xLjwaj/ — Pete, Sep 30 '16 at 12:49
Yes i require the html markup. i read that text area does except html? — alwayslearning, Sep 30 '16 at 12:49
the code is copying into the textarea with html but it is not saving html — alwayslearning, Sep 30 '16 at 12:51
@alwayslearning What you mean with "not saving"? The value doesn't show in the markup, when you're retrieving it afterwards? Change the value of the `value` attribute instead of `val()`. Textarea doesn't accept HTML, i.e. the value is always rendered as plain text. — Teemu, Sep 30 '16 at 13:00
`$(selector).html()` returns *text*. The same as this comment is *text* but contains html, look, here: "sometext" - it's text, same as returned by `.html()`. So you can put *text* in a textarea. — freedomn-m, Sep 30 '16 at 13:15
"but it is not saving html*" - there's **nothing** in the question about "saving" - please ask a new question and mark one of the answers as correct for the problem as *described in the question* - do not add-on extra, hidden, new "but now it does Y" — freedomn-m, Sep 30 '16 at 13:16
@freedomn-m well it depend, whats the point of copying html in a field that does not accept it. or does it. because if it doesnt then the answer should be you cant do this. as it is already part of my question " i need the html". which means i ned the html nothing less then that — alwayslearning, Sep 30 '16 at 13:20
As you wish new question hitting the forum due to nonsense politics and no one can agree if if a textarea holds html on being sent or not, so i make a new question askin the same thing again fine — alwayslearning, Sep 30 '16 at 13:22
Ok - looks like it depeonds on your definition of "html" - for most of us, "html" is "text that includes markup". But perhaps you mean DOM nodes? — freedomn-m, Sep 30 '16 at 13:39
It's not "nonsense" - you ask a question, you get (multiple) answers that answer that question. If you then change that question, by adding "but now...", it's a *different* question and the existing answers, that people spent their time providing for you, now no longer answer the *new* question and what happens is other people come to the question and read the new question and see the answers for the old question and go "that doesn't answer the [new] question", not realising it's new and *downvote* the answers. Which is unfair and frankly, a bit rude to those that spent their time helping you — freedomn-m, Sep 30 '16 at 13:42
Is this what you're after: https://jsfiddle.net/pzhc9f29/ ? Or did you already get passed this bit? — freedomn-m, Sep 30 '16 at 13:45

score 4 · Answer 1 · answered Sep 30 '16 at 12:36

4

$('#copy').click(function() {
    var text = $('#copy_history').html();
    $('.paste_history').val(text);
});

Hope this will work..

answered Sep 30 '16 at 12:36

Bhagwat K

2,982
2
23
33

Don't put html in both. For $(.past_history) keep it as val(). – Bhagwat K Sep 30 '16 at 12:40
ok it works but it does not save the html? i will check the anti injection, might be the problem xss – alwayslearning Sep 30 '16 at 12:52

score 4 · Answer 2 · answered Sep 30 '16 at 12:47

See html and/or clone:

Grab the markup inside a given element:

$('#copy').on('click', function() {
  $('#input').val($('#sample').html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="sample">Here's some <b>markup</b></div>

<label for="input">Input</label>
<input type="text" id="input"/>

<button id="copy">Copy sample markup</button>

Grab the markup inside and including the given element:

$('#copy').on('click', function() {
  $('#input').val($('<div/>').append($('#sample').clone()).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="sample">Here's some <b>markup</b></div>

<label for="input">Input</label>
<input type="text" id="input"/>

<button id="copy">Copy sample markup</button>

To include given markup element, this would be easier: `$('#input').val($('#sample').prop('outerHTML'));` — A. Wolff, Sep 30 '16 at 13:05

score 0 · Answer 3 · edited Sep 30 '16 at 14:35

0

Try append() insteal of val():

$('#copy').click(function() {
    var text = $('#copy_history');
    $('.paste_history').append(text);
});

edited Sep 30 '16 at 14:35

Al Foиce ѫ

4,195
12
39
49

answered Sep 30 '16 at 12:36

Rax Weber

3,730
19
30

jquery copy html from div and paste into a input

3 Answers3