如何将创建的元素传递给另一个函数答案

【问题标题】：How to pass created element to another function如何将创建的元素传递给另一个函数
【发布时间】：2020-12-03 11:14:06
【问题描述】：

 function createElement() {
   const btnCreate = document.createElement('button');
   btnCreate.className = 'btn btn-danger btn-sm float-right delete';
   const btnValue = document.createTextNode('X');
   btnCreate.appendChild(btnValue);
   const li = document.createElement('li');
   li.className = 'list-group-item';
   const liValue = document.createTextNode(formValue.value);
   li.appendChild(liValue);
   li.appendChild(btnCreate); 
  }

 function addField(li) {
  if(select.value == 'Priority task') {
  prioTask.appendChild(createElement(li));
 } else {
  normalTask.appendChild(createElement(li));
 }

我创建了一个单独的函数来创建元素并避免冗余，我想将“li”变量传递给 addField。但是我遇到了错误。如何将创建的元素传递给另一个函数？

【问题讨论】：

您正在尝试附加li 元素（在createElement 中创建的元素），对吗？
是的，创建的元素 li 应该传入 addField 函数
如果您认为其中一个答案有帮助，请将其标记为已接受。这是向下投票下方的按钮

标签： javascript function parameter-passing

【解决方案1】：

然后你必须用这个列表元素调用 addField

function createElement(){

addField(li);

}

这对您有帮助吗？如果不是，你能显示你的错误信息吗？

【讨论】：

嗯，li是为了createElement函数而创建的。现在我想将 createElement 创建的 li 传递给 addField 函数
为什么像 document.createElement() 一样调用函数？
只是试一试，老实说我不知道如何将创建的元素调用到另一个函数
不，我的意思是已经有函数createElement document.createElement()
哦，是的。我在 createElement 函数中创建了一个元素 li。现在从该函数创建的元素将传递给 addField 函数。然后我将它插入到 ul 中。这就是为什么会有 normalTask.appendChild 和 prioTask.appendChild。取决于用户选择的内容。

【解决方案2】：

我认为您在混淆参数。在您的代码中，createElement 创建了一个不返回给其他函数的元素。您正在使用const，其范围定义为“块范围”，这意味着该变量仅在您声明它的代码块中可用。
请注意，您不需要传递刚刚创建的元素addField，只需将元素传递给appendChild。为了解决这个问题，您必须在createElement 中返回新创建的元素，然后将其作为第一个参数传递给appendChild。

function createElement() {
    const btnCreate = document.createElement('button');
    btnCreate.className = 'btn btn-danger btn-sm float-right delete';
    const btnValue = document.createTextNode('X');
    btnCreate.appendChild(btnValue);
    const li = document.createElement('li');
    li.className = 'list-group-item';
    const liValue = document.createTextNode(formValue.value);
    li.appendChild(liValue);
    li.appendChild(btnCreate); 

    // Here, you're returning the element to whoever calls the function
    return li;
}

function addField() {
    if(select.value == 'Priority task') {
        // Here, you're passing the element returned by the other function to appendChild
        prioTask.appendChild(createElement());
    } else {
        normalTask.appendChild(createElement());
    }
}

最后你只需要打电话给addField，这就是即将发生的事情：

addField 知道它必须将一个子元素附加到 prioTask，因此它会检查他必须附加的元素是什么
原来你传递的是createElement返回的值，所以函数被执行了
函数完成后，会将新创建的元素返回给调用它的实体
此时，addField 知道他必须将您刚刚返回的内容传递给appendChild

【讨论】：

嘿伙计！非常感谢。是的，我一开始对我写的东西感到困惑。但在这里谢谢我终于明白了。
@Denyyel 不客气，如果回答对您有帮助，收到赞会很棒:)
已经交配了。但它现在无法显示，因为我低于 15 名声望。再次感谢！