CODEWITHSUNDEEP
javascriptjquery
jchand
jchand

Reputation: 827

How to escape quotes inside an inline javascript function

My function is running perfectly without using class in appended div but when I try to add a class on the element it is not working.

<head>
    <script type="text/javascript">
        function showt(id){
            $('body').append(id)
        }
    </script>
</head>

<body>
    <a href="#" id="hidemain" onmouseover='showt("<div class='sdf'>appended</div>")'>show detail</a>
</body>

Upvotes: 3

Views: 9865

Answers (5)

Rory McCrossan
Rory McCrossan

Reputation: 337550

Since you tagged your question with jQuery, here's the jQuery version using a mouseover handler instead of a onmouseover attribute, which negates the escaping of quotes altogether.

<head>
    <!-- include jquery.js here -->
    <script type="text/javascript">
        $(function() {
            $('#hidemain').mouseover(function() {
                showt('<div class="sdf">appended</div>');
            });
        });

        function showt(id){
            $('body').append(id)
        }
    </script>
</head>

<body>
    <a href="#" id="hidemain">show detail</a>
</body>

Upvotes: 6

Sirko
Sirko

Reputation: 74036

Just escape quotes, when used inside other quotes. Also just use the respective other quotes inside the attribute. So if you enclose the attribute in " just use ' and \' inside and vica verse. (Thanks to @nnnnnn for mentioning this!)

<a href="#" id="hidemain" onmouseover="showt('<div class=\'sdf\'>appended</div>')">show detail</a>

or

<a href="#" id="hidemain" onmouseover='showt("<div class=\"sdf\">appended</div>')">show detail</a>

EDIT

In order to get the event object, you should add the event handler programatically like this:

<a href="#" id="hidemain">show detail</a>
<script>
  document.getElementById( 'hidemain' ).addEventListener( 'click', function( event ) {
    showt( '<div class="sdf">appended</div>' );
    // here you have access to event and thus event.pageX
  });
</script>

Upvotes: 14

nnnnnn
nnnnnn

Reputation: 150010

You need to escape the embedded quotes with \:

<a href="#" id="hidemain" onmouseover='showt("<div class=\"sdf\">appended</div>")'>show detail</a>

Note that also I changed the inner quotes to doubles as well as escaping them because if outer quotes are around an html element attribute using the same type of quote within may not work even when escaped.

Upvotes: 1

TryingToImprove
TryingToImprove

Reputation: 7407

If you already are using jQuery, you instead do this:

$(function() {
    function showt(domElement){
        $('body').append(domElement)
    }

    $("#hidemain").mouseover(function() {
        showt($("<div />").addClass("sdf").text("test"));
    });
})

Upvotes: 2

Jai
Jai

Reputation: 74738

you can try this one:

onmouseover='showt("<div class=\'sdf\'>appended</div>")'

these quotes needs to be escaped '\'.

Upvotes: 1

Related Questions