Блог

Я пытаюсь добавить текст к существующему элементу с помощью textContent . Но когда я использую = оператор (назначение добавления), но в результате уже существующие теги, такие как b , потеряли свой эффект. Я думаю, что я просто добавляю к нему, но это также влияет на предыдущий контент. Кто-нибудь может объяснить, почему? Я проверил документы, но ничего об этом не нашел.

HTML:

 <div id="divA">Something<b>bold</b></div>
 

JS

 const some = document.getElementById("divA");
some.textContent  = "Hi"; // This results in : "Something boldHi" without the bolded formatting. 
some.textContent = some.textContent   "Hi"; //This too results in the same!
 

Заранее спасибо!

.textContent Значение элемента возвращает именно это — текстовое содержимое, которое является обычным текстом, а не HTML-разметкой содержимого.

Если вы это сделаете

 some.textContent  = "Hi"
 

Будет извлечено текстовое содержимое контейнера, которое не будет содержать никаких тегов — например

 <div id="divA">Something<b>bold</b></div>
 

будет извлекать:

 Something bold
 

Объединение с этим и последующее присвоение результата .textContent элементу приводит к тому, что потомки элемента заменяются одним текстовым узлом, где значение текстового узла является присвоенным значением.

Если вы используете .innerHTML = вместо этого предыдущую HTML — разметку потомков, она будет сохранена, но все потомки будут повторно проанализированы в соответствии с назначенной HTML-разметкой, поэтому прослушиватели событий и связанные с ними вещи, зависящие от элементов DOM, будут потеряны. Лучшим вариантом является использование .insertAdjacentHTML , которое не требует повторного анализа потомков.

Еще лучшим вариантом было бы добавить сам узел вместо того, чтобы пытаться писать HTML-разметку (что потенциально небезопасно), например

 some.appendChild(document.createTextNode('Hi'))
 

Когда вы принимаете textContent , то вы получите Somethingbold простой текст без HTML-тегов

 console.log(some.textContent); // Somethingbold
 

Вы добавляете textContent , вместо этого вы должны использовать innerHTML

 const some = document.getElementById("divA");
some.innerHTML  = "Hi"; // This results in : "Something boldHi" without the bolded formatting. 
some.innerHTML = some.innerHTML   "Hi"; //This too results in the same! 

 <div id="divA">Something<b>bold</b></div>