如何使用jQuery將HTML標簽添加到屬性中

Question

我需要使用jQuery將一些HTML代碼設置為html屬性。

像這樣的東西：

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

但是轉義有問題...我該如何解決這個問題？

Answer 1

這是您所有選項的詳細分類。

雙引號和單引號都可以使用反斜杠轉義：

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

當然，您也可以根據情況（即您的情況）在雙引號內使用單引號：

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

最后，單引號也可以放在雙引號內：

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

編輯

解決轉義字符串的一種好方法是將內容插入瀏覽器控制台。

 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

如果您做過這樣的事情，請采取以下措施：

 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>