Uczymy się zmieniać textContent elementów zachowując jednocześnie ich innerHTML. Do dzieła.
Rzućmy na to okiem:
window.addEventListener("DOMContentLoaded", function(){
let para = document.getElementById('para');
let txt = para.textContent;
console.log(txt);
//bla bla bla
});Dodajemy pogrubienie:
window.addEventListener("DOMContentLoaded", function(){
let para = document.getElementById('para');
let txt = para.textContent;
para.innerHTML = "<b>"+txt+"</b>";
console.log(para.innerHTML);
//<b>bla bla bla</b>
console.log(para.textContent);
//bla bla bla
});Wydaje się okej. Teraz zmieńmy tekst już po pogrubieniu:
window.addEventListener("DOMContentLoaded", function(){
let para = document.getElementById('para');
let txt = para.textContent;
para.innerHTML = "<b>"+txt+"</b>";
console.log(para.innerHTML);
//<b>bla bla bla</b>
console.log(para.textContent);
//bla bla bla
para.textContent = 'New text';
console.log(para.innerHTML);
//New text
});Pogrubienie znika. Cóż, musimy zrobić coś takiego:
para.childNodes.forEach(node => {
console.log(node);
});
//<b>Ok, to rozwiązanie nie jest idealne, ale się sprawdzi:
window.addEventListener("DOMContentLoaded", function(){
let para = document.getElementById('para');
let txt = para.textContent;
para.innerHTML = "<b>"+txt+"</b>";
console.log(para.innerHTML);
//<b>bla bla bla</b>
console.log(para.textContent);
//bla bla bla
para.childNodes.forEach(node => {
node.textContent = 'new text';
});
console.log(para.innerHTML);
//<b>new text</b>
});Więcej w następnych lekcjach…
