JavaScript动态创建input输入框后无法在其后方添加空格

我向一个div元素中追加了一个input输入框，需要在该input输入框后添加一个单个空格，多次尝试都没有实现效果。
已尝试的代码如下：

const el = document.createElement('input');
el.setAttribute('type', 'number');
el.appendChild(document.createTextNode(' '));
/*
  还尝试过以下写法：
  el.appendChild(document.createTextNode('\u00A0'));
  el.appendChild(document.createTextNode(' '));
  el.innerHTML = el.innerHTML + ' ';
*/

const id = document.getElementById('content');
id.appendChild(el);
id.focus();

<div id="content" contentEditable="true"></div>

• input是空元素，不支持包含任何子节点，所有往input内部调用appendChild、修改innerHTML的操作都是无效的，写入的内容不会被渲染。
• 你需要的空格是input的同级节点，应该插入到input的父容器中，而不是作为input的子元素插入。
• 普通半角空格在HTML渲染时会被折叠，直接插入普通空格无法稳定显示，需要使用不换行空格。

const el = document.createElement('input');
el.setAttribute('type', 'number');

const parent = document.getElementById('content');
parent.appendChild(el);
// 往父容器追加input的同级节点：不换行空格
parent.appendChild(document.createTextNode('\u00A0'));
parent.focus();

注意：不要给createTextNode传入 作为参数，该方法会把传入值作为纯文本处理，不会解析HTML实体，最终会直接显示 字符串，不会渲染为空格。

内容的提问来源于stack exchange，提问作者xRay