如何使用jQuery将HTML标签添加到属性中

Question

I need to set some HTML code with jQuery to html attribute.

Something like this :

$(".carousel").attr("data-dot","<button role="button" class="owl-dot"><?php 
include("inc/chart3.svg")?></button>");

but there is problem with escaping... How can i solve this problem?

Answer 1

Here's an extensive breakdown of all your options.

Both double and single quotes can be escaped with backslashes:

 $(".carousel").attr("data-dot", "<button role=\"button\">");
 $(".carousel").attr("data-dot", '<button role=\'button\'>');

Of course, you can also use single quotes inside of double quotes depending on the scenario (ie, yours):

 $(".carousel").attr("data-dot", "<button role='button'>");

Finally, single quotes can also be placed inside double quotes:

 $(".carousel").attr("data-dot", '<button role="button">');

EDIT

A good way to play around with escaping strings is just plugging stuff into your browser console.

 console.log("Here is a \\"quote.\\""); console.log('Here is a "quote."'); console.log("Here is 'another quote.'"); console.log('Here is yet \\'another quote.\\''); 

Answer 2

Tidier if you did something like this:

 let $btn = $("<button/>", { "role": "button", "class": "owl-dot", "html": "<?php include('inc/chart3.svg');?>" }); $(".carousel").attr("data-dot", $btn.prop('outerHTML')); console.log('carousel: ', $('.carousel').attr('data-dot')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="carousel"></div>