Trim white space from label without removing inside <input>
<p>My html:</p>

<pre><code>&lt;div class="product-addon product-addon-extra-tip"&gt;
    &lt;p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0"&gt;
        &lt;label&gt;&lt;input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2"&gt; 2 &lt;/label&gt;
    &lt;/p&gt;
    &lt;p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1"&gt;
        &lt;label&gt;&lt;input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5"&gt; 5 &lt;/label&gt;
    &lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>You can see the label has whitespace on either side of the number.  My javascript is meant to trim only that whitespace, but it is eliminating the whole <code>input</code> tag as well.</p>

<pre><code>var labels = document.querySelectorAll("div.product-addon label");
for (var i = 0; i &lt; labels.length; i++) {
  labels[i].textContent = labels[i].textContent.trim();
}
</code></pre>

<p><code>innerText</code> and <code>innerHTML</code> aren't working in place of <code>textContent</code>.  What am I doing wrong?</p>