Javascript - additional space from textContent
<p>I'm attempting to get the text from an element, remove some of the string, add a question mark &amp; then place the <strong>updated string</strong> into another element</p>

<p>However, when the element is returned, the markup generates additional unwanted space before &amp; also puts the question mark on an entirely new line within the element.</p>

<p>This is what is returned from a console log</p>

<p><a href="https://i.stack.imgur.com/hnw9E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hnw9E.png" alt="console log"></a>
Code Example</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Set Variables for Dynamic Copy Function

let choiceNode = document.querySelectorAll('.choice');
let dynamicCopyNode = document.querySelector('.dynamic-copy');

// Update the text type on dynamic copy &amp; append a question mark + remove 'The '

function updateChoice() {

 let choiceSelected = this.textContent + '?';
 let choiceSelectedTrim = choiceSelected.replace('The ', '');
 dynamicCopyNode.textContent = choiceSelectedTrim;

}


// Click listener to trigger the function

Array.from(choiceNode).forEach(function(element) {
  element.addEventListener('click', updateChoice);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
 &lt;div class="choice-wrapper"&gt;
  &lt;div class="choice"&gt;
   &lt;input type="radio" name="choice" id="one" value="1"&gt;
   &lt;label for="one"&gt;
    &lt;p class="name"&gt;The first choice&lt;/p&gt;
   &lt;/label&gt; 
  &lt;/div&gt;
  &lt;div class="choice"&gt;
   &lt;input type="radio" name="choice" id="one" value="2"&gt;
   &lt;label for="one"&gt;
    &lt;p class="name"&gt;The second choice&lt;/p&gt;
   &lt;/label&gt; 
  &lt;/div&gt;
  &lt;div class="choice"&gt;
   &lt;input type="radio" name="choice" id="one" value="3"&gt;
   &lt;label for="one"&gt;
    &lt;p class="name"&gt;The third choice&lt;/p&gt;
   &lt;/label&gt; 
  &lt;/div&gt;
  &lt;div class="choice"&gt;
   &lt;input type="radio" name="choice" id="one" value="4"&gt;
   &lt;label for="one"&gt;
    &lt;p class="name"&gt;The fourth choice&lt;/p&gt;
   &lt;/label&gt; 
  &lt;/div&gt;
  &lt;div class="error-wrap"&gt; 
   &lt;label class="error" for="choice" generated="true"&gt;&lt;/label&gt; 
  &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="copy-wrapper"&gt;
  &lt;div class="variable-copy"&gt;
   &lt;p&gt;Why did you choose&lt;/p&gt;
   &lt;h1 class="dynamic-copy"&gt;&lt;/h1&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>What I'm trying to achieve is a return like so <strong>first choice?</strong></p>