点击复选框将span文本填入input值，解决输入框内容不识别问题

我希望实现点击复选框时，将span标签中的文本添加到input输入框的value属性中，仅使用原生JavaScript（不使用jQuery）。目前已经实现了文本填入输入框的功能，但点击输入框时，系统无法识别其中已添加的文本，请问该如何解决？

原实现代码：

const inputContainer = document.querySelector('.input-container');
const spanText = document.querySelector('.span-t');
const checkbox = document.querySelector('#checkbox');
const check = document.getElementById('check');
const btn = document.querySelector('.btn');


/* Add Input Field */
const applyInput = function(){    
    const inputDiv = document.createElement("div");
    const inputContent  = `<div class="input-container">
                                <div>
                                    <input class="input" type="text" name="input-code"  value=""></input>
                                </div>
                                <button type="submit" class="btn" disabled="">
                                    <span>Submit</span>
                                </button>
                            </div>`;

    inputDiv.id = "input-container";
    inputDiv.innerHTML = inputContent; 
};
applyInput();


/* Add Span Text */
const span = document.createElement('div');
if(document.getElementById('p-text') !== null) document.getElementById('p-text').parentNode.removeChild(document.getElementById('p-text'));
span.id = "p-text";
span.innerHTML += '<p class="p-text">P Text<span class="span-t">Span Text</span></p>';
inputContainer.after(span);

/* Add Checkbox */
const addingCheckbox = () => {
    if(document.getElementById('checkbox') !== null) document.getElementById('checkbox').parentNode.removeChild(document.getElementById('checkbox'));

    const addCheckboxHtml = document.createElement('div');
    addCheckboxHtml.id = 'checkbox';
    addCheckboxHtml.className = 'checkboxEl';
    addCheckboxHtml.innerHTML = `<label class="checkbox"><input type="checkbox" id="check"><span></span></label>`;

    if(document.getElementById('checkbox') === null) {
        spanText.after(addCheckboxHtml);
    }

};
addingCheckbox();

/* Add if Checked */
checkbox.addEventListener('click', () => {
    document.querySelector('.input').value = spanText.innerHTML;
});

check.onchange = function() {
    btn.disabled = !this.checked;
};

核心问题出在DOM元素的获取时机错误和动态元素的引用失效：

1. 初始代码在页面加载时就获取了spanText、checkbox等元素，但这些元素是后续通过函数动态创建的，初始获取时它们还不存在，导致变量引用为null，后续事件绑定根本没生效。
2. 动态创建input容器后，没有将其添加到页面中，导致后续基于该容器的DOM操作无意义。
3. 通过JS修改input的value后，没有触发浏览器的输入事件，导致系统无法识别输入框内容已更新。

修正后的代码如下，重点调整元素获取时机、补充DOM添加操作，并手动触发输入事件：

/* Add Input Field */
const applyInput = function(){    
    const inputDiv = document.createElement("div");
    const inputContent  = `<div class="input-container">
                                <div>
                                    <input class="input" type="text" name="input-code"  value=""></input>
                                </div>
                                <button type="submit" class="btn" disabled="">
                                    <span>Submit</span>
                                </button>
                            </div>`;

    inputDiv.id = "input-container";
    inputDiv.innerHTML = inputContent;
    // 把创建的input容器添加到页面
    document.body.appendChild(inputDiv);
};
applyInput();

/* Add Span Text */
const inputContainer = document.querySelector('.input-container');
const span = document.createElement('div');
if(document.getElementById('p-text') !== null) document.getElementById('p-text').parentNode.removeChild(document.getElementById('p-text'));
span.id = "p-text";
span.innerHTML += '<p class="p-text">P Text<span class="span-t">Span Text</span></p>';
inputContainer.after(span);

// 动态创建span后，再获取spanText引用
const spanText = document.querySelector('.span-t');

/* Add Checkbox */
const addingCheckbox = () => {
    if(document.getElementById('checkbox') !== null) document.getElementById('checkbox').parentNode.removeChild(document.getElementById('checkbox'));

    const addCheckboxHtml = document.createElement('div');
    addCheckboxHtml.id = 'checkbox';
    addCheckboxHtml.className = 'checkboxEl';
    addCheckboxHtml.innerHTML = `<label class="checkbox"><input type="checkbox" id="check"><span></span></label>`;

    if(document.getElementById('checkbox') === null) {
        spanText.after(addCheckboxHtml);
    }
};
addingCheckbox();

// 动态创建复选框后，再获取相关元素引用
const check = document.getElementById('check');
const btn = document.querySelector('.btn');

/* 绑定复选框事件 */
check.addEventListener('change', () => {
    const inputEl = document.querySelector('.input');
    if(check.checked) {
        inputEl.value = spanText.textContent; // 用textContent避免获取HTML标签
    } else {
        inputEl.value = '';
    }
    // 手动触发input事件，让浏览器识别输入框内容变化
    inputEl.dispatchEvent(new Event('input'));
    // 同步按钮禁用状态
    btn.disabled = !check.checked;
});

• 延迟获取元素引用：在动态创建完所有元素后，再获取对应的DOM引用，确保引用的是实际存在的元素。
• 补充DOM添加操作：将创建的input容器添加到页面中，否则所有基于该容器的操作都无效。
• 绑定正确事件目标：直接给复选框的<input>元素绑定change事件，而非外层div，确保状态变化能被准确捕获。
• 触发input事件：通过dispatchEvent(new Event('input'))手动触发输入事件，让浏览器和相关脚本识别输入框内容已更新。
• 使用textContent：获取span文本时用textContent代替innerHTML，避免意外获取到HTML标签，保证内容纯净。

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