Add html object by name using jQuery prop ()

Question

I would like to add an ellipsis to the placeholder attribute of the input element using jQuery prop(), but instead of the intended one, …I get a literal string ….

How can I add html objects by name using jQuery prop()?

$(document).ready(function(){
	$('div#b input').prop('placeholder','Search…');
});

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

<div id="a"><input type="text" placeholder="Search&hellip;" /></div><br />
<div id="b"><input type="text" /></div>

Run codeHide result

Answer 1

The simplest solution is to use raw hexadecimal code instead of a named object, since they are processed only by the JS and DOM API fines.

$(document).ready(function(){
	$('div#b input').prop('placeholder','Search\u2026'); // <- \u2026 is &hellip;
});

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

<div id="a"><input type="text" placeholder="Search&hellip;" /></div><br />
<div id="b"><input type="text" /></div>

Run codeHide result

Answer 2

You have to call the HTML parser anyway. You can create a new element, set its HTML content and get its contents as text:

$('div#b input').prop(
  'placeholder',
  $('<div />').html('Search&hellip;').text()
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="b">
  <input />
</div>

Run codeHide result

. HTML-

Answer 3

:

$(document).ready(function(){
	$('div#b input').prop('placeholder',$(document.createElement('div')).html('Search…').text());
});

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

<div id="a"><input type="text" placeholder="Search&hellip;" /></div><br />
<div id="b"><input type="text" /></div>

Hide result