So, i want to insert a div in the page when a specific condition arrives. I'm checking the condition in PHP like:

if ($var == 0) {
    echo '<script>console.log("Test.");
    var res = document.getElementById("response");
    res.innerHTML = "<div class="hello">hi</div>";</script>';
}

So, what i think is that the single and double quotes are mixed within each other and its giving SyntaxError on this piece of code

echo '<script>res.innerHTML = "<div class="hello">hi</div>"</script>';

I tried writing

res.innerHTML = "<div class='hello'>hi</div>";

but then the code doesn't work as i'm using it inside php's echo for which I'm using single quotes('').

My basic goal here is to add a division with a class in my code if the condition satisfies. I'm checking the condition in PHP. Can you please tell me how can i avoid getting that error, as the following works fine.

echo '<script>res.innerHTML = "<div>hi</div>"</script>';

So, i want to insert a div in the page when a specific condition arrives. I'm checking the condition in PHP like:

if ($var == 0) {
    echo '<script>console.log("Test.");
    var res = document.getElementById("response");
    res.innerHTML = "<div class="hello">hi</div>";</script>';
}

So, what i think is that the single and double quotes are mixed within each other and its giving SyntaxError on this piece of code

echo '<script>res.innerHTML = "<div class="hello">hi</div>"</script>';

I tried writing

res.innerHTML = "<div class='hello'>hi</div>";

but then the code doesn't work as i'm using it inside php's echo for which I'm using single quotes('').

My basic goal here is to add a division with a class in my code if the condition satisfies. I'm checking the condition in PHP. Can you please tell me how can i avoid getting that error, as the following works fine.

echo '<script>res.innerHTML = "<div>hi</div>"</script>';

• javascript
• php
• html

• Put it in one line:- if ($var == 0) { echo '<script>console.log("Test.");var res = document.getElementById("response");res.innerHTML = "<div class="hello">hi</div>";</script>'; } – Death-is-the-real-truth Commented Apr 3, 2018 at 13:26
• 1 i would close the php tag and open it again – Roland Starke Commented Apr 3, 2018 at 13:26
• @AlivetoDie it is in one line, i just showed it in different lines, so that it can be seen clearly – ashawe Commented Apr 3, 2018 at 13:26
• 2 @axiac "<div class="hello">hi</div>" is not valid Javascript. – Keith Commented Apr 3, 2018 at 13:28
• 1 @ashawe - stop with these ments and read the answer below! – Randy Casburn Commented Apr 3, 2018 at 13:32

2 Answers 2

Short Answer

You need to escape the nested quotes in your html string:

res.innerHTML = "<div class=\\"hello\\">hi</div>";</script>'

You need double slash, because you also need to escape the slash in the PHP string.

Full example:

if ($var == 0) {
    echo '<script>console.log("Test."); var res = document.getElementById("response"); res.innerHTML = "<div class=\\"hello\\">hi</div>";</script>';
}

Longer Answer

A more detailed explanation of the problem...

If you echo your exact script, you will get the following javascript:

console.log("Test.");
var res = document.getElementById("response");
res.innerHTML = "<div class="hello">hi</div>";

As you will find, the 3rd line is invalid as you need to escape the inner quotes in the HTML. Normally you do this in JavaScript by using a bination of single and double quotes, however you are already using single quotes for the PHP. So you need to escape the quotes around hello.

Your aim should be to produce the following JavaScript:

console.log("Test.");
var res = document.getElementById("response");
res.innerHTML = "<div class=\"hello\">hi</div>";

Which can be done, with my suggestion at the start.

Of course, if you prefer you could escape single quotes instead:

res.innerHTML = \'<div class="hello">hi</div>\';</script>'

I would close the PHP mode, write the JavaScript and then enter the PHP mode again. It is more clear and less error-prone this way:

if ($var == 0) {
?>
    <script>
        console.log("Test.");
        var res = document.getElementById("response");
        res.innerHTML = '<div class="hello">hi</div>';
    </script>
<?php
}

If you need to use values stored in the PHP variables inside the generated JavaScript, this format makes everything a piece of cake (as opposed to building the script into a PHP string that requires a lot of escaping):

$message = 'hi';
if ($var == 0) {
?>
    <script>
        console.log("Test.");
        var res = document.getElementById("response");
        res.innerHTML = '<div class="hello"><?php echo(addslashes($message)); ?></div>';
    </script>
<?php
}

Need to use addslashes() to properly encode the value of $message because it is used to generate a JavaScript string.

Update

As my discussion with @roland-starke in the ments revealed, a better alternative to addcslashes()is json_encode(). Take care that, given an PHP string, json_encode() generates a plete JavaScript string, including the double quotes that enclose it.

Using json_encode(), the code above bees:

$message = 'hi';
if ($var == 0) {
?>
    <script>
        console.log("Test.");
        var res = document.getElementById("response");
        res.innerHTML = '<div class="hello">' +
                        <?php echo(json_encode($message)); ?> +
                        '</div>';
    </script>
<?php
}