CODEWITHSUNDEEP
javascriptphphtml
Mukta Chourishi
Mukta Chourishi

Reputation: 64

div innerhtml not taking html

I want to update innerhtml of div with id NotifyDiv

I want to change it with following html code.

$html="<ul id='js-news'><li>HELLO WORLD!</li></ul>";

I am using following code to change it.

echo "<script>document.getElementById('NotifyDiv').innerHTML='$html'</script>";

But no changes occur. However it I remove id = 'js-news' from the above ul tag it works.But I'll need the id.

Upvotes: 0

Views: 434

Answers (4)

Pupil
Pupil

Reputation: 23978

You need to pass PHP variable with PHP syntax that is <?php ?>

Even if we can mix PHP, JavaScript and HTML together, we need to initialize proper languages before using their variables in case of JavaScript and PHP.

So, final code should be:

echo "<script>document.getElementById('NotifyDiv').innerHTML = '<?php echo $html;?>'</script>";

Otherwise, everything looks correct.

Upvotes: 0

Nikhil sHETH
Nikhil sHETH

Reputation: 530

Perfect ans to your query is as under (just copy n paste and check it)

<?php
$html="<ul id='js-news'><li>HELLO WORLD!</li></ul>";
?>

<script type="text/javascript">
document.getElementById('NotifyDiv').innerHTML="<?php echo $html; ?>";
</script>";

Upvotes: 0

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76408

Basically, the code you have causes a syntax error in JS:

echo "...innerHTML='$html'</script>";

expands to:

             // opening '  closing ' => js-news === syntax error!
             //   \/       \/       
echo "...innerHTML='<ul id='js-news'><li>HELLO WORLD!</li></ul>'</script>";

Resulting JS code:

document.getElementById('NotifyDiv').innerHTML='<ul id='js-news'><li>HELLO WORLD!</li></ul>'

The syntax highlighting shows the problem
Note the single quotes around $html and the single quotes inside the $html string. The best way to echo PHP values in JS would be to use json_encode:

echo "...document.getElementById('NotifyDiv').innerHTML=", json_encode($html), "</script>";

The output should be something like:

<script>document.getElementById('NotifyDiv').innerHTML="<ul id='js-news'><li>HELLO WORLD!<\/li><\/ul>"</script>

Now, those slashes are escaped, and you probably don't want that. Thankfully, there's a second parameter you can pass to json_encode: cf the docs. Passing JSON_UNESCAPED_SLASHES is what you need to do here:

$html="<ul id='js-news'><li>HELLO WORLD!</li></ul>";
echo "<script>document.getElementById('NotifyDiv').innerHTML=".json_encode($html, JSON_UNESCAPED_SLASHES)."</script>";

The output:

<script>document.getElementById('NotifyDiv').innerHTML="<ul id='js-news'><li>HELLO WORLD!</li></ul>"</script>

DEMO

Upvotes: 1

Mex
Mex

Reputation: 999

If you check the source code of your browser you will see this:

<script>document.getElementById('NotifyDiv').innerHTML='<ul id='js-news'><li>HELLO WORLD!</li></ul>'</script>

So we can see that in the JavaScript string you are using apotrophes, but the string is already encloded with apostrophes, so it attempts to end the string early: (before the letter j in js-news)

'<ul id='js-news'><li>HELLO WORLD!</li></ul>'

This can be solved by using escaped quotation marks for the JS string:

echo "<script>document.getElementById('NotifyDiv').innerHTML=\"$html\"</script>";

Upvotes: 2

Related Questions