Question

大家好，我是编程新手，所以对我的问题很愚蠢或太简单感到抱歉。我试图在父元素上附加4个不同的子元素。

我正在构建“待办事项列表”应用程序，并且希望该应用程序以这样的方式工作：输入并保存“任务”后，输入的任务将出现在带有复选框，删除按钮的列表中，和一个编辑按钮。我尝试使用.appendchild（）将子元素附加到其父元素上，但不起作用。

  scope :install, -> (theme) {
    shop = proxy_association.owner
    shop.theme.unpublish! if shop.theme
    self.create!(
      name: theme.name,
      zip: theme.zip,
      theme_id: theme.id,
      role: theme.role,
      load_preset: theme.load_preset
    )
  }

我希望程序执行的操作是在每次单击“保存”按钮时向其添加inputToDoList.value，复选框，编辑按钮和删除按钮，但是该功能仅在我第一次单击保存按钮时才起作用时间。在随后的几次单击“保存”按钮时，只有inputToDoList.value被添加到列表中。其他元素（即复选框，编辑按钮和删除按钮）将不再添加。

Answer 1

在click事件中创建按钮元素。当前，您将createElement放置在addButton事件之外。根据您的要求，应该在添加点击事件中创建按钮，因此元素创建应该在添加点击事件中进行。

let inputToDoList = document.getElementById('inputToDoList');

let addButton = document.getElementById('addButton');

let ol = document.getElementById('ol');
addButton.addEventListener('click', () => {
  let editButton = document.createElement('button');
  let deleteButton = document.createElement('button');
  let checkInput = document.createElement('input');
  checkInput.type = "checkbox"
  deleteButton.innerText = "Delete"
  editButton.innerText = "Edit"
  let li = document.createElement('li');
  li.textContent = inputToDoList.value
  ol.appendChild(checkInput)
  ol.appendChild(li)
  ol.appendChild(editButton)
  ol.appendChild(deleteButton)

  if (inputToDoList.value.length > 0) {
    inputToDoList.value = '';
  }
});

<input type="text" id="inputToDoList" />
<button id="addButton">
Add
</button>
<ol id="ol">

</ol>

Answer 2

您必须使用 cloneNode => https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

// making of LI type element, with checkBox, Text and buttons Edit / delete :
const LI_toDo      = document.createElement('li')
,     chk_toDo     = document.createElement('input')
,     txt_toDo     = document.createElement('span')
,     bt_edit_toDo = document.createElement('button')
,     bt_del_toDo  = document.createElement('button')
;
chk_toDo.type            = "checkbox";
bt_edit_toDo.textContent = 'Edit';
bt_del_toDo.textContent  = 'Delete';

LI_toDo.appendChild(chk_toDo);
LI_toDo.appendChild(txt_toDo);
LI_toDo.appendChild(bt_edit_toDo);
LI_toDo.appendChild(bt_del_toDo);
// - - - - - - - - - -- - - - -- - - -making completed...

const inputToDoList = document.getElementById('inputToDoList')
,     List_ol       = document.getElementById('ol')
;

document.getElementById('addButton').onclick = function()
{
  txt_toDo.textContent  = inputToDoList.value;
  inputToDoList.value   = '';
  List_ol.appendChild( LI_toDo.cloneNode(true) );
}


List_ol.onclick = function(e)              //  clicks events over 'ol' elements
{                     
  if (!e.target.matches('button')) return; // check if it is on a button

  switch (e.target.textContent)
  {
    case 'Edit':    EditButton(e.target.parentNode);    break; //  e.target.parentNode 
    case 'Delete':  DeleteButton(e.target.parentNode);  break; // === LI parent of clicked button 
  }
}

function EditButton(toDo_LI)
{
  let SpanTxt = toDo_LI.querySelector('span')
  ,   change  = prompt('Edit..',SpanTxt.textContent )
  ;
  if (change) { SpanTxt.textContent = change }
}

function DeleteButton(toDo_LI)
{
  let SpanTxt = toDo_LI.querySelector('span')
  ,   Del     = confirm(`please confirm delete of ${SpanTxt.textContent}`)
  ;
  if (Del) { List_ol.removeChild( toDo_LI ) }
}

span {
  display: inline-block;
  width: 200px;
  padding : 0 5px 5px 0; 
  border-bottom :1px solid lightblue;
}
button { margin: 5px }

<div>
  <label>what to do : </label><input id="inputToDoList" type="text">
  <button id="addButton">add</button>
</div>

<ol id="ol"></ol>

如何将多个子元素附加到父元素Javascript

2 个答案: