javacript: modify current dom ( not for display )

I have a simple page with a content. I want to catch a dom , modify it before a treatment for a pdf tools.

 // keep the id main content 
 let element = document.getElementById('page-content'); 
 // keep element concern button menu for the current dom ( line 1 )
 let div = element.getElementById('menu-zone-button-to-print'); // error
 // add text in the div
 let text = div.createTextNode("This just got added");
 // add div in the current node ( 'div' )

Error “TypeError: Cannot read property ‘getElementById’ of null” for the line 2. I have the id, is correct. thank for help


There are 2 things incorrect about your code

First: Id property should be unique hence you dont need to search inside page-content for your menu-zone-button-to-print since its already unique and one exist you can directly search for it like this

let div = document.getElementById('menu-zone-button-to-print');

if you still want to do so you can do it with querySelector as in the example below

Second: Stored elements dont have createTextNode in them only document does if im not mistaken if you want to create an element then you will have to use document.createTextNode like this

let text = document.createTextNode("This just got added");

and then append the created text to the div like this


Below is a working example of your code

var element = document.getElementById('page-content'); 
let div = element.querySelector('#menu-zone-button-to-print');

let text = document.createTextNode("This just got added");
<div id="page-content">

  <div id="menu-zone-button-to-print">
    <p> Hello </p>