Displaying command as text

Question

My code:

var element = '<button>'+text+'</button>';
$('#output').append(element+"\n");

HTML

<textarea id="output" readonly></textarea>

I want it so the element (button) display in textarea as text not element. I want it to display:

'<button>Hi</button>'

if text = "Hi"
Any ideas ?

Possible duplicate: http://stackoverflow.com/questions/1787322/htmlspecialchars-equivalent-in-javascript — Jared, Sep 30 '16 at 15:45

score 0 · Answer 1 · answered Sep 30 '16 at 15:46

0

Use .val() instead of .append():

$('#output').val(element+"\n");

answered Sep 30 '16 at 15:46

j08691

204,283
31
260
272

it has to be append. – killereks Sep 30 '16 at 15:49
1

@killereks Why does it have to be append? If you need to build on the input just use `$('#output').val( $('#output').val() + element + "\n");` – j08691 Sep 30 '16 at 15:49
because i have many other lines in there ? I need it to be append so it gets added. – killereks Sep 30 '16 at 15:51
When i use val other lines do not get appended ;/ – killereks Sep 30 '16 at 15:52
@killereks That's because you are overwriting the value with a new one so you need to get the existing value before adding new content to it. J08691 shows you how to do that in the comment above – NewToJS Sep 30 '16 at 15:54
@j08691Maybe update your answer to show the same as your fiddle? – mwoelk Sep 30 '16 at 16:00

NewToJS · Answer 2 · 2016-09-30T16:28:12.443

As mentioned in the other answer, use val() but you want to get the existing value before overwriting it. The reason for this answer being posted is due to the other one not being updated.

Working Demo

$("#Example").on( "click", function() {
  //Add new input before existing content
$('#output').val($('#input').val()+"\n"+$('#output').val());
  //Add new input after existing content
//$('#output').val( $('#output').val() +$('#input').val()+ "\n");  
 $('#input').val('');
  $('#input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="input"/><button id="Example">Add</button><br/>
<textarea id="output" readonly></textarea>

JS Fiddle Demo

To preset the text into a button you can wrap the button tags around the input value.

Example: "<button>"+$('#input').val()+"</button>" JS Fiddle Demo 2

Demo Two

$("#Example").on( "click", function() {
//New input before existing content
 $('#output').val("<button>"+$('#input').val()+"</button>\n"+$('#output').val());
 //New input after existing content
 //$('#output').val( $('#output').val() +"<button>"+$('#input').val()+ "</button>\n");
  $('#input').val('');
  $('#input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="input"/><button id="Example">Add</button><br/>
<textarea id="output" readonly></textarea>

If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.

I hope this help. Happy coding!

Displaying command as text

2 Answers2