How to add HTML tags into attribute with jQuery

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?

asked Nov 15 '18 at 19:34

kores59

948

1

Wrap code in ' instead of "

– Mohammad
Nov 15 '18 at 19:37

1

Stuffing html into an element attribute is ugly and generally not necessary. Why are you needing to do this in the first place?

– charlietfl
Nov 15 '18 at 19:50

@charlietfl i need to make custom animated dots for owl-carousel, and the animation is made by svg file and this is made by add code into data-dot attribute

– kores59
Nov 15 '18 at 20:08

Hard to believe there aren't cleaner ways to do it

– charlietfl
Nov 15 '18 at 20:17

add a comment |

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?

asked Nov 15 '18 at 19:34

kores59

948

1

Wrap code in ' instead of "

– Mohammad
Nov 15 '18 at 19:37

1

Stuffing html into an element attribute is ugly and generally not necessary. Why are you needing to do this in the first place?

– charlietfl
Nov 15 '18 at 19:50

@charlietfl i need to make custom animated dots for owl-carousel, and the animation is made by svg file and this is made by add code into data-dot attribute

– kores59
Nov 15 '18 at 20:08

Hard to believe there aren't cleaner ways to do it

– charlietfl
Nov 15 '18 at 20:17

add a comment |

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?

asked Nov 15 '18 at 19:34

kores59

948

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?

javascript jquery html

asked Nov 15 '18 at 19:34

kores59

948

asked Nov 15 '18 at 19:34

kores59

948

asked Nov 15 '18 at 19:34

kores59

948

asked Nov 15 '18 at 19:34

kores59

948

asked Nov 15 '18 at 19:34

kores59

948

1

Wrap code in ' instead of "

– Mohammad
Nov 15 '18 at 19:37

1

Stuffing html into an element attribute is ugly and generally not necessary. Why are you needing to do this in the first place?

– charlietfl
Nov 15 '18 at 19:50

@charlietfl i need to make custom animated dots for owl-carousel, and the animation is made by svg file and this is made by add code into data-dot attribute

– kores59
Nov 15 '18 at 20:08

Hard to believe there aren't cleaner ways to do it

– charlietfl
Nov 15 '18 at 20:17

add a comment |

1

Wrap code in ' instead of "

– Mohammad
Nov 15 '18 at 19:37

1

Stuffing html into an element attribute is ugly and generally not necessary. Why are you needing to do this in the first place?

– charlietfl
Nov 15 '18 at 19:50

@charlietfl i need to make custom animated dots for owl-carousel, and the animation is made by svg file and this is made by add code into data-dot attribute

– kores59
Nov 15 '18 at 20:08

Hard to believe there aren't cleaner ways to do it

– charlietfl
Nov 15 '18 at 20:17

Wrap code in ' instead of "

– Mohammad
Nov 15 '18 at 19:37

Stuffing html into an element attribute is ugly and generally not necessary. Why are you needing to do this in the first place?

– charlietfl
Nov 15 '18 at 19:50

@charlietfl i need to make custom animated dots for owl-carousel, and the animation is made by svg file and this is made by add code into data-dot attribute

– kores59
Nov 15 '18 at 20:08

Hard to believe there aren't cleaner ways to do it

– charlietfl
Nov 15 '18 at 20:17

add a comment |

2 Answers
2

active

oldest

votes

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 (i.e., 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.'');

answered Nov 15 '18 at 19:39

Sheng

1,038715

And is there any way how to execute php code? <?php include("inc/chart3.svg")?> .

– kores59
Nov 15 '18 at 19:45

1

@kores59 You can't directly do this with JavaScript -- PHP has to be processed on the server side. However, if you place that <?php include in your .php file, that would work. Quick example: foo.php - <script>var a = "<?php echo time(); ?>"</script> would set a variable a to time when your page was loaded. Takes a bit of finagling, but you can do most things.

– Sheng
Nov 15 '18 at 19:48

add a comment |

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>

answered Nov 15 '18 at 19:51

Stuart

5,26021630

Thanks, but the php code in attribute is commented, so it won´t execute "data-dot="<button role="button" class="owl-dot"></button>"

– kores59
Nov 15 '18 at 20:12

i think that's stackoverflow's commenting system doing that to it - try the code.

– Stuart
Nov 15 '18 at 22:02

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326759%2fhow-to-add-html-tags-into-attribute-with-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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 (i.e., 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.'');

answered Nov 15 '18 at 19:39

Sheng

1,038715

And is there any way how to execute php code? <?php include("inc/chart3.svg")?> .

– kores59
Nov 15 '18 at 19:45

1

@kores59 You can't directly do this with JavaScript -- PHP has to be processed on the server side. However, if you place that <?php include in your .php file, that would work. Quick example: foo.php - <script>var a = "<?php echo time(); ?>"</script> would set a variable a to time when your page was loaded. Takes a bit of finagling, but you can do most things.

– Sheng
Nov 15 '18 at 19:48

add a comment |

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 (i.e., 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.'');

answered Nov 15 '18 at 19:39

Sheng

1,038715

And is there any way how to execute php code? <?php include("inc/chart3.svg")?> .

– kores59
Nov 15 '18 at 19:45

1

@kores59 You can't directly do this with JavaScript -- PHP has to be processed on the server side. However, if you place that <?php include in your .php file, that would work. Quick example: foo.php - <script>var a = "<?php echo time(); ?>"</script> would set a variable a to time when your page was loaded. Takes a bit of finagling, but you can do most things.

– Sheng
Nov 15 '18 at 19:48

add a comment |

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 (i.e., 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.'');

answered Nov 15 '18 at 19:39

Sheng

1,038715

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 (i.e., 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.'');

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.'');

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.'');

answered Nov 15 '18 at 19:39

Sheng

1,038715

answered Nov 15 '18 at 19:39

Sheng

1,038715

answered Nov 15 '18 at 19:39

Sheng

1,038715

answered Nov 15 '18 at 19:39

Sheng

1,038715

And is there any way how to execute php code? <?php include("inc/chart3.svg")?> .

– kores59
Nov 15 '18 at 19:45

1

@kores59 You can't directly do this with JavaScript -- PHP has to be processed on the server side. However, if you place that <?php include in your .php file, that would work. Quick example: foo.php - <script>var a = "<?php echo time(); ?>"</script> would set a variable a to time when your page was loaded. Takes a bit of finagling, but you can do most things.

– Sheng
Nov 15 '18 at 19:48

add a comment |

And is there any way how to execute php code? <?php include("inc/chart3.svg")?> .

– kores59
Nov 15 '18 at 19:45

1

@kores59 You can't directly do this with JavaScript -- PHP has to be processed on the server side. However, if you place that <?php include in your .php file, that would work. Quick example: foo.php - <script>var a = "<?php echo time(); ?>"</script> would set a variable a to time when your page was loaded. Takes a bit of finagling, but you can do most things.

– Sheng
Nov 15 '18 at 19:48

And is there any way how to execute php code? <?php include("inc/chart3.svg")?> .

– kores59
Nov 15 '18 at 19:45

@kores59 You can't directly do this with JavaScript -- PHP has to be processed on the server side. However, if you place that <?php include in your .php file, that would work. Quick example: foo.php - <script>var a = "<?php echo time(); ?>"</script> would set a variable a to time when your page was loaded. Takes a bit of finagling, but you can do most things.

– Sheng
Nov 15 '18 at 19:48

add a comment |

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>

answered Nov 15 '18 at 19:51

Stuart

5,26021630

Thanks, but the php code in attribute is commented, so it won´t execute "data-dot="<button role="button" class="owl-dot"></button>"

– kores59
Nov 15 '18 at 20:12

i think that's stackoverflow's commenting system doing that to it - try the code.

– Stuart
Nov 15 '18 at 22:02

add a comment |

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>

answered Nov 15 '18 at 19:51

Stuart

5,26021630

Thanks, but the php code in attribute is commented, so it won´t execute "data-dot="<button role="button" class="owl-dot"></button>"

– kores59
Nov 15 '18 at 20:12

i think that's stackoverflow's commenting system doing that to it - try the code.

– Stuart
Nov 15 '18 at 22:02

add a comment |

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>

answered Nov 15 '18 at 19:51

Stuart

5,26021630

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>

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>

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>

answered Nov 15 '18 at 19:51

Stuart

5,26021630

answered Nov 15 '18 at 19:51

Stuart

5,26021630

answered Nov 15 '18 at 19:51

Stuart

5,26021630

answered Nov 15 '18 at 19:51

Stuart

5,26021630

Thanks, but the php code in attribute is commented, so it won´t execute "data-dot="<button role="button" class="owl-dot"></button>"

– kores59
Nov 15 '18 at 20:12

i think that's stackoverflow's commenting system doing that to it - try the code.

– Stuart
Nov 15 '18 at 22:02

add a comment |

Thanks, but the php code in attribute is commented, so it won´t execute "data-dot="<button role="button" class="owl-dot"></button>"

– kores59
Nov 15 '18 at 20:12

i think that's stackoverflow's commenting system doing that to it - try the code.

– Stuart
Nov 15 '18 at 22:02

Thanks, but the php code in attribute is commented, so it won´t execute "data-dot="<button role="button" class="owl-dot"></button>"

– kores59
Nov 15 '18 at 20:12

i think that's stackoverflow's commenting system doing that to it - try the code.

– Stuart
Nov 15 '18 at 22:02

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky