Member Avatar for awestove
awestove 0 Newbie Poster

Problem was solved, was using the wrong id stupidly...

Edited by awestove because: n/a
  • 1 Contributor
  • 0 Replies
  • 84 Views

Dani AI

Generated

As discovered, a mismatched element id is the most common reason innerHTML appears to "not work." document.getElementById('foo') returns null when the id string does not exactly match the HTML, and attempting to set innerHTML on null will fail. Verify the id in the markup, ensure ids are unique, and watch for simple typos or case differences.

Other frequent causes include running the script before the element exists (place scripts at the end of the body or use the DOMContentLoaded event), using innerHTML on form controls (use .value for inputs), earlier JavaScript errors that stop execution, or using the wrong selector type (querySelector('#id') vs getElementById('id')). See the browser docs for Element.innerHTML and Document.getElementById.

A small, resilient pattern:

document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById('myDiv');
  if (!el) {
    console.warn('Element with id "myDiv" not found');
    return;
  }
  el.innerHTML = '<p>Updated content</p>';
});

Security note: innerHTML inserts markup and can create XSS risks. Use textContent for plain text or sanitize any HTML from untrusted sources before inserting. See DOMContentLoaded for DOM timing details.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.