Вміст тега

Для того, щоб зчитати чи змінити вміст тега - є декілька властивостей:


				p.textContent;

				p.innerText;

				p.innerHTML;

				p.outerHTML;

.textContent - внутрішній текст тега зі всіма пробілами та переносами строк:


				<p>hey ho <strong>hello</strong></p>

				<p>

				     hey        ho

				  <strong>hello     </strong>

				</p>

Ці два параграфи в браузері будуть виглядати однаково, але у них буде різний textContent, у першого - просто строка з трьох слів, у другого - з переносами строк і пробілами, перевірте у пісочниці.

.innerText - внутрішній текст тега, будьте обережні: в деяких випадках видає варіант тексту, який ми бачемо в браузері, та останнім часом може видати текст зі всіма пробілами та переносами строк, аналогічно властивості textContent.

.innerHTML - внутрішній html-код, включаючи дочірні теги.

.outerHTML - html-код всього елемента, включаючи дочірні теги, а також - атрибути цього елемента.

Всі ці властивості можна змінити:


				<p><span>Hey!</span></p>


				p.textContent = 'Ho!!';

				p.innerText = 'Ho!!';

				p.innerHTML = '<strong>Ho!!</strong>';

				p.outerHTML = '<section class="main"><strong>Ho!!</strong></section>';

Передостання строчка кода автоматично створить дочірній елемент strong у параграфа.

Остання строчка перетворить параграф на секцію і добавить клас main.