getElementById 动态创建元素并将其附加到 DOM

Question

我正在执行 2 个脚本。第一个脚本 (jquery) 创建一个输入并将其附加到表单。第二个脚本获取动态创建的输入的值。但现在我得到的是空值。为了解决所有问题，是的，第一个脚本已经过多次测试，并且确实创建了输入并正确附加了值。如何从第二个脚本中动态创建的元素中获取值？

第一个脚本

<script src="js/firstscript.js"></script>
  $(document).ready(function(e){
    $('.button').click(function(e){

      e.preventDefault();
      var userCurrency = 'usd';

      $('<input>').attr({
        type: 'hidden',
        id: 'userCurrency',
        name: 'userCurrency',
        value: userCurrency
      }).appendTo('#payment-form');

  })
})

第二个脚本

<script>
  //get currency
  var amountCurrency = document.getElementById('userCurrency');
  console.log(amountCurrency);
</script>

Answer 1

如果你想让这些脚本彼此分开，你可以使用这个事件处理程序：

document.getElementById('payment-form').addEventListener("DOMNodeInserted", function (ev) {
  if (ev.target.id === 'userCurrency') {
    console.log(ev.target.id);
  }
}, false);

它会触发然后你的元素附加到表单。

在其他情况下，如果您可以加入脚本，您应该在附加元素或调用全局函数后放置第二个脚本

Answer 2

我解决了我的问题，我基本上只是将 jquery 和 javascript 混合在一起。是的，我知道什么不好的做法，但现在它完美无缺，这对团队来说很重要。

简而言之，这就是最终结果。没什么神奇的，但它为我做到了：

<script src="js/firstscript.js"></script>
  $(document).ready(function(e){
    $('.button').click(function(e){

      e.preventDefault();
      var userCurrency = 'usd';

      $('<input>').attr({
        type: 'hidden',
        id: 'userCurrency',
        name: 'userCurrency',
        value: userCurrency
      }).appendTo('#payment-form');

  })
})

//vanilla javascript code below
var amountCurrency = userCurrency;

getElementById 动态创建元素并将其附加到 DOM

getElementById Where Element is dynamically created and appended to DOM

javascript

jquery

getelementbyid