.textContent不替换文本

Question

I'm new to use javascript but having been running into an issue regarding the .textContent function in a script editing an existing webpage.

Instead of replacing the text content, it simply appends the string to the end. Looking at the HTML, the original text is in a span while the text I intended as a replacement ends up outside the span but still in the div. How would I go about replacing the span text entirely?

It ends up looking like this

<div class="errorMessage" data-reactid="180"><span>Original Text</span>Intended Replacement text.</div>

Answer 1

Give your <span> an id like <span id="error-id"> , then use document.getElementById('error-id') to get a reference to the span. Or you could just move the class you already have to the span instead of the div, and continue to use document.getElementsByClassName("errorMessage") .

Update: Randy Casburn's suggestion is good too.

Answer 2

 var ele = document.querySelector('.errorMessage span').textContent = 'Intended Replacement text'; /* InnerHTML can also be used but it is slower than the textContent as it parses HTML */ // ele.innerHTML = 'Intended Replacement text'; 

 <div class="errorMessage" data-reactid="180"><span>Original Text</span></div>