I am trying to create p tags and inside them span with insertAdjacentHTML method and give each one of them unique id, and after that I want to change or update the textContent, but I don't know the reason why it is not working?. If you have the solution please help me.
const wraper = document.querySelector("#wraper")
const place2 = "afterbegin";
const textOfTimerTile = `
<div class="dataWraper">
<p id="program"><span id="programData"></span></p>
<p id="machineId"><span id="machineIdData"></span></p>
</div>
`;
wraper.insertAdjacentHTML(place2, textOfTimerTile);
const program = document.getElementById("program");
const programData = document.getElementById("programData");
const machineId = document.getElementById("machineId");
const machineIdData = document.getElementById("machineIdData");
program.textContent = "Program";
programData.textContent = "Program Span";
machineId.textContent= "Machine ID";
machineIdData.textContent= "Machine Span";
console.log("p tag ", program);
console.log("span ", programData)#program, #machineId{
width: 150px;
height: 100px;
background-color: green
}
#programData, #machineIdData{
width:100px;
height: 60px;
background-color: red;
}<div id="wraper"></div>When you run program.textContent = "Program"; you're actually removing the span from the page (you can see that in the browser's dev tools).
What you can do instead is program.insertAdjacentText('afterbegin', 'Program')
According to MDN textContent:
Both textContent and innerText remove child nodes when altered. It is impossible to insert the nodes again into any other element or into the same element after doing so.
Meaning you override and inner elements of your <p>'s.
If you want, I suggest use innerHTML and add to it text instead of destroying your html structure with textContent.
However, since you set a new innerHTML you need to get the inner elements again.
To sum up -
const wraper = document.querySelector("#wraper")
const place2 = "afterbegin";
const textOfTimerTile = `
<div class="dataWraper">
<p id="program"><span id="programData"></span></p>
<p id="machineId"><span id="machineIdData"></span></p>
</div>
`;
wraper.insertAdjacentHTML(place2, textOfTimerTile);
const program = document.getElementById("program");
const machineId = document.getElementById("machineId");
program.innerHTML = "Program" + program.innerHTML;
const programData = document.getElementById("programData");
programData.innerHTML = "Program Span";
machineId.innerHTML = "Machine ID" + machineId.innerHTML;
const machineIdData = document.getElementById("machineIdData");
machineIdData.innerHTML = "Machine Span";#program,
#machineId {
width: 150px;
height: 100px;
background-color: green
}
#programData,
#machineIdData {
width: 500px;
height: 60px;
background-color: red;
}<div id="wraper"></div>Now, I don't know that complete context for your code, but an alternative could be to make use of the template literal (template string) that you already defined.
const wraper = document.querySelector("#wraper");
let programtext = "Program";
let programDatatext = "Program Span";
let machineIdtext = "Machine ID";
let machineIdDatatext = "Machine Span";
const textOfTimerTile = `<div class="dataWraper">
<p id="program">${programtext}<span id="programData">${programDatatext}</span></p>
<p id="machineId">${machineIdtext}<span id="machineIdData">${machineIdDatatext}</span></p>
</div>`;
wraper.innerHTML = textOfTimerTile;#program,
#machineId {
width: 150px;
height: 100px;
background-color: green
}
#programData,
#machineIdData {
width: 100px;
height: 60px;
background-color: red;
}<div id="wraper"></div>