jQuery .html() working OK, but JavaScript .innerHTML not working

Question

I'm unable to find out the reason why $('#valvonta_d').html(data); is working, but valvonta_div.innerHTML = data; is not working at all.

I have some JavaScript/jQuery code:

$(document).ready(function(){
  valvonta = function() {
    var kaavio = 106;

    jQuery.post("hae_tilanteet.php", {
      kaavio: kaavio
    }).done(function(data) {
      // the following would work, but I prefer using JavaScript:
      // $('#valvonta_d').html(data);

      // this is not working
      var valvonta_div = document.getElementById('valvonta_d');
      valvonta_div.innerHTML = data;
    });
  };

  setTimeout(valvonta, 6000);
};

I have this HTML code:

<div id="valvonta_d"></div>

What does "not working" mean? What exactly are you appending? There's no issue in the code you've shown. — , Mar 12 '17 at 00:55
...and you're not invoking the `valvonta` function, so neither should be working. Is there a reason you've put the code in there? — , Mar 12 '17 at 00:56
@xms You'll have to elaborate on your post before we'll be able to help you directly, without just guessing. Saying "doesn't work" simply isn't detailed enough. There are too many possibilities. So... In exactly what way are the 2 results different? Different appearance? Different behavior? Can you provide or at least summarize the contents provided by `hae_tilanteet.php` as `data`? — Jonathan Lonowski, Mar 12 '17 at 01:17
@JonathanLonowski Yes, in fact, the value of variable `data` is ``. So, how should I use eval()? — xms, Mar 12 '17 at 01:17

Jonathan Lonowski · Answer 1 · 2017-03-12T02:06:22.317

0

the value of variable data is <script>...</script>.

<script> elements inserted via innerHTML are intentionally disabled/ignored by the browser out of concern for it potentially permitting cross-site scripting.

You'll have to evaluate them yourself by retrieving their contents in a separate step.

}).done(function(data) {
    var valvonta_div = document.getElementById('valvonta_d');
    valvonta_div.innerHTML = data;

    Array.from(valvonta_div.querySelectorAll('script')).forEach(function (script) {
        if (script.getAttribute('src')) return;

        // `(0, ...)` for global eval via indirect reference
        (0, eval)(script.textContent || '');
    });
});

Though, if you can, try to avoid the need to eval().

In general at least, you should be able to define a generic form of the <script> as a function, included within the page prior to this.

function prepareVolvanta(kaavio, container) {
    // ...
}

Then, call that function when the content is ready.

var valvonta_div = document.getElementById('valvonta_d');
valvonta_div.innerHTML = data; // content markup only

prepareVolvanta(kaavio, valvonta_div);

Related: Can scripts be inserted with innerHTML?

edited Mar 12 '17 at 02:06

answered Mar 12 '17 at 01:38

Jonathan Lonowski

121,453
34
200
199

How should I declare valvonta_div? – xms Mar 12 '17 at 01:50
If I add `setTimeout(valvonta, 6000);` to inside of `.done(function(data)` it does not work anymore when using your code. Otherwise your code works fine. – xms Mar 12 '17 at 02:34
I hadn't suggested that you move the `setTimeout`. There was a prior answer by another user that suggested something similar, though not quite that. – Jonathan Lonowski Mar 12 '17 at 02:42
I modified my opening message, so now you see what I did mean. – xms Mar 12 '17 at 02:47
@xms First, please don't edit your question in a way that knowingly breaks the code in the snippet. The comment was sufficient. – I understood what you meant, but I think you may be confusing my answer with a another post that was written and deleted by different user. I hadn't mentioned `setTimeout()` before these comments or suggested that it should be moved anywhere. – Jonathan Lonowski Mar 12 '17 at 02:59

jQuery .html() working OK, but JavaScript .innerHTML not working

1 Answers1