Question

我已经创建了一个函数（create_entry）来构建和设置一个div框（条目），我希望稍后通过调用另一个函数（append_entry）来附加到第二个div（条目）。

const create_entry = () => {

  // Element Creation
  let entry_div = document.createElement('div'); // Entry
  let entry_div_date = document.createElement('span'); // Date
  let entry_div_content = document.createElement('p'); // Content
  let entry_div_button = document.createElement('button'); // Button

  // Element Styling
  entry_div.className = 'entry';
  entry_div_date.className = 'date';
  entry_div_button.className = 'remove';
  entry_div_button.style.marginTop = '10px';

  // Element Populating
  entry_div_content.textContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, ullam.'

  // Element Appending
  entry_div.appendChild(entry_div_date);
  entry_div.appendChild(entry_div_content);
  entry_div.appendChild(entry_div_button);

  // Test Output
  console.log(entry_div);

  return entry_div;

}

这是第二个函数，选择条目div并尝试将第一个函数中创建的元素附加到它。

const append_entry = (entry) => {
  let entries_div = document.querySelector('.entries');
  entries_div.appendChild(entry());
}

这样称呼

append_entry(create_entry);

我错误地认为第一个函数会输出创建的元素，而是输出null。

如何输出第一个函数的元素/节点作为第二个函数的参数？

Answer 1

在return entry_div函数的底部添加create_entry以返回要追加的元素。

您没有执行要传递的功能。通过在函数名末尾指定括号来执行传递的函数：

const append_entry = (entry) => {
  let entries_div = document.querySelector('.entries');
  var el = entry();
  entries_div.appendChild(entry());
}

工作代码示例：

const create_entry = () => {

  // Element Creation
  let entry_div = document.createElement('div'); // Entry
  let entry_div_date = document.createElement('span'); // Date
  let entry_div_content = document.createElement('p'); // Content
  let entry_div_button = document.createElement('button'); // Button
  
  entry_div_button.innerHTML = 'My Button';

  // Element Styling
  entry_div.className = 'entry';
  entry_div_date.className = 'date';
  entry_div_button.className = 'remove';
  entry_div_button.style.marginTop = '10px';

  // Element Populating
  entry_div_content.textContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, ullam.'

  // Element Appending
  entry_div.appendChild(entry_div_date);
  entry_div.appendChild(entry_div_content);
  entry_div.appendChild(entry_div_button);

  // Test Output
  console.log(entry_div);

  return entry_div;

}


const append_entry = (entry) => {
  let entries_div = document.querySelector('.entries');
  var el = entry();
  entries_div.appendChild(el);
}
append_entry(create_entry);

<div class="entries"></div>

Answer 2

我认为你忘了在console.log之后的return语句（entry_div）所以你的代码应该是

console.log(entry_div);
return entry_div;

如何附加作为函数结果创建的元素？

2 个答案: