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);
});

@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
– André Dion, Commented Sep 30, 2016 at 12:41
"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" — fdomn-m
– fdomn-m, Commented Sep 30, 2016 at 13:16
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 — fdomn-m
– fdomn-m, Commented Sep 30, 2016 at 13:42

Bhagwat K · Accepted Answer · 2016-09-30 12:36:48Z

4

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

Hope this will work..

answered Sep 30, 2016 at 12:36

Bhagwat K

3,2122 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhagwat K Over a year ago

Don't put html in both. For $(.past_history) keep it as val().

alwayslearning Over a year ago

ok it works but it does not save the html? i will check the anti injection, might be the problem xss

André Dion · Accepted Answer · 2016-09-30 12:47:03Z

4

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>

answered Sep 30, 2016 at 12:47

André Dion

21.8k7 gold badges59 silver badges60 bronze badges

1 Comment

A. Wolff Over a year ago

To include given markup element, this would be easier: $('#input').val($('#sample').prop('outerHTML'));

Al Foиce ѫ · Accepted Answer · 2016-09-30 14:35:21Z

0

Try append() insteal of val():

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

edited Sep 30, 2016 at 14:35

Al Foиce ѫ

4,34112 gold badges44 silver badges51 bronze badges

answered Sep 30, 2016 at 12:36

Rax Weber

3,78121 silver badges30 bronze badges

Collectives™ on Stack Overflow

jquery copy html from div and paste into a input

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related