Question 311590 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to edit text of a div inside another div

Hi i have 2 html file popup.html and popup_error.html

i have added div in popup_error.html to another div called inner-body in popup.html
but when i tried to access and edit the div that is linked from popup_error.html it throw an error TypeError: Cannot set properties of null (setting 'innerText').

i guessed it the DOM may not be fully loaded so i tried document.getElementById('inner-body').addEventListener('DOMContentLoaded', function() {} but this function throws an error Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Currently my code below is able to add and display div from popup_error.html on popup.html but only unable to edit the div error-code text

Any advice will be greatly appreciated!

My code:

popup.js

/*Set div innerbody of popup.html to popup_error.html*/
document.getElementById('inner-body').innerHTML = '<object style="height: 100%" type="text/html" data="../layout/popup_error.html" ></object>'

/*Set error-code*/
 document.getElementById("error-code").innerText="404 Not found" //Failed

popup.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="../styles/popup.css"
  <script src="../scripts/popup.js"></script>
</head>

<body>
 <div id="inner-body">
    <div id="header-3"> Loading...</div>
    <div id="text-1">Getting information</div>
  </div>
</body>

</html>

popup_error.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="../styles/popup.css">
  <script src="../scripts/popup.js"></script>
</head>

<body>
  <div id="error-code">Error: Code</div>
</body>

</html>
Tags:

2

Answers


  1. 0

    You can try to manipulate the DOM elements after the document is fully loaded:

    //Wait for the DOM content to be fully loaded
document.addEventListener('DOMContentLoaded', function () {
  //Set div inner-body of popup.html to popup_error.html
  document.getElementById('inner-body').innerHTML = '<object style="height: 100%" type="text/html" data="../layout/popup_error.html" ></object>';

  //Set error-code
  var errorCodeElement = document.getElementById("error-code");
  if (errorCodeElement) {
    errorCodeElement.innerText = "404 Not found";
  }
});
    Login or Signup to reply.
  2. 0

    It seems like the issue is related to the timing of when you are trying to access and modify elements in the DOM. When you set the innerHTML of the inner-body div to the content of popup_error.html, the content is loaded asynchronously. So, when you try to access the error-code element immediately after setting the innerHTML, it may not be available in the DOM yet.
    You can use the load event on the object element to know when the content has been fully loaded. Here’s how you can modify your code

    // Set div innerbody of popup.html to popup_error.html

  var innerBody = document.getElementById('inner-body');
  innerBody.innerHTML = '<object style="height: 100%" type="text/html" 
  data="../layout/popup_error.html"></object>';

// Wait for the content to be fully loaded

 var objectElement = innerBody.querySelector('object');
 objectElement.addEventListener('load', function() {

// Now the content is fully loaded, you can access and modify elements

  var errorCodeElement = 
  objectElement.contentDocument.getElementById('error-code');
  errorCodeElement.innerText = "404 Not found";

  });

    This way, you are waiting for the content inside the object element to be fully loaded before attempting to access and modify the error-code element. The load event ensures that the content has been loaded, and then you can safely manipulate the DOM inside the loaded content.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search