简化检查

您可以看到这种行为是完全可能的-下面的小片段显示了一个简化的情况。
第一个

代码更新

现在，您提供的代码段可以正常工作，没有错误。

/* 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="" />
  </div>
  <button type="submit" class="btn" disabled="">
    <span>Submit</span>
  </button>
</div>
`;

  inputDiv.id = "input-container";
  inputDiv.innerHTML = inputContent;

  // you need to add the created element to the DOM,
  // e.g. append it to the body
  document.body.append(inputDiv)
};
applyInput();

// only elements that are created can be queried, so
// these variables must be initialized AFTER the element(s)
// they are supposed to get exist in the document (DOM)
const inputContainer = document.querySelector('.input-container');
const btn = document.querySelector('.btn');


/* Add Span Text */
// the creation of the span has to be also encapsulated in
// a function - this way it's easier to handle
const addingSpan = () => {
  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);
}
addingSpan()
// element after it is actually created
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();
// element after it is actually created
const checkbox = document.querySelector('#checkbox');
const check = document.getElementById('check');

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

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

升级代码

我认为下面的代码片段做了你原始代码做的事情，但是结构更干净，更简单。

const getInputHtml = () => `
<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>
`;

const getSpanHtml = () => `<p class="p-text">P Text<span class="span-t">Span Text</span></p>`;

const getCheckboxHtml = () => `<label class="checkbox-label"><input class="checkbox" type="checkbox" id="check" /></label>`;

// only execute function, if selector cannot be found in DOM
const ifNotExistsInDomFn = (selector) => (fn) => {
  if (!document.querySelector(selector)) {
    return fn()
  }
}

const appendHtmlStrTo = (el) => (str) => {
  el.insertAdjacentHTML('beforeend', str)
};
const appendHtmlStrToBody = appendHtmlStrTo(document.body);

// IIFE: Immediately Invoked Function Expression
(function() {
  // creating UI
  const inputHtml = getInputHtml()
  appendHtmlStrToBody(inputHtml)
  const spanHtml = getSpanHtml()
  ifNotExistsInDomFn(".p-text")(() => appendHtmlStrToBody(spanHtml))
  const checkboxHtml = getCheckboxHtml()
  ifNotExistsInDomFn(".checkbox")(() => appendHtmlStrToBody(checkboxHtml))

  // setting event handlers
  const cb = document.querySelector(".checkbox")
  cb.addEventListener("click", function() {
    document.querySelector(".input").value = document.querySelector(".span-t").innerHTML
  })
  cb.addEventListener("change", function() {
    document.querySelector(".btn").disabled = !cb.checked
  })
})();