How can I append with JavaScript to a page, html that contains attribute definitions enclosed in single quotes?
Question
I have some JS code that creates on the fly some HTML elements. Let's say something like this:
var html = '<a href="#" class="example">Some content</a>';
$(whateverselector).append(html);
As you can see jQuery is used. I am trying to do the following: I am generating some html elements and I want that on this specific elements I add attributes that are enclosed in single quotes.
var someOption = '<a href="#" data-options=\'{"maxWidth": 100, "maxHeight": 100}\'></a>';
$(whateverselector).append(someOption);
What happens is that the single quote is replaced by double quotes in the final DOM after jQuery is adding the element to the page. So it looks like this:
<a href="#" data-options="{"maxWidth": 100, "maxHeight": 100}"></a>
The issue is that another (independent) library is reading this values and it is not parsing them correctly (as an object) with the double quotes.
How can I make this attribute display with single quotes inside the DOM? Probably this is an issue from the append method in jQuery. Vanilla JS solutions are also welcomed.
3 answers
solution1
4 ACCPTED 2017-04-13 16:14:01
What happens is that the single quote is replaced by double quotes in the final DOM after jQuery is adding the element to the page.
You're missing the difference between markup and the live structure that is the DOM.
Markup (HTML in this case) is a textual representation of the elements. Once it's parsed and the elements are created, they're objects in a tree (the document). The quotes on attribute values are a markup thing; they don't exist once the markup is parsed.
For instance, these have identical results:
$("whatever").append("<a href='#'>...</a>");
$("whatever").append('<a href="#">...</a>');
There's no difference, at all, in the resulting a element in the DOM.
Browsers showing you the DOM (for instance, Inspect Element in the dev tools) are showing you a representation of the DOM. They can show the attribute values however they choose; most in my experience show them in double quotes, but they could use single quotes if they liked. It has nothing to do with the markup (if any) that was parsed to create those elements.
The issue is that another (independent) library is reading this values and it is not parsing them correctly (as an object) with the double quotes.
I suspect you're misinterpreting what's going wrong. But if you're not, the library in question is simply broken. Proof:
var someOption = '<a href="#" data-options=\\'{"maxWidth": 100, "maxHeight": 100}\\'></a>'; $(document.body).append(someOption); var options = JSON.parse($("a").attr("data-options")); console.log(options.maxWidth, options.maxHeight); // 100, 100
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
solution2
0 2017-04-13 16:17:25
Why don't you use the .data() or even the .attr() functions of jQuery:
var someOption = $('<a href="#" data-options=""></a>');
someOption.data('options' , '{"maxWidth": 100, "maxHeight": 100}');
// OR: someOption.attr('data-options' , '{"maxWidth": 100, "maxHeight": 100}');
$(whateverselector).append(someOption);
solution3
-1 2017-04-13 16:21:51
you can do something like this:
<body>
<h1>Title</h1>
<p class="text"></p>
<script type="text/javascript">
$(document).ready(function(){
var someOption = "<a href=\"#\" data-options=\"{'maxWidth': 100, 'maxHeight': 100}\">Some text</a>";
$(".text").append(someOption);
});
</script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.