使用 javascript 与创建元素中的某些元素创建多个元素

Question

我正在尝试使用 javascript 在用户输入文本后一遍又一遍地创建一组元素，在该文本中它会显示带有带有图像的按钮的文本它，但我找不到有效的方法。

我要创建的当前方法要求每个元素都有一个 id 标记，以便我可以调用 appendChild 将元素连接在一起。

我还需要将一个创建元素附加到另一个添加问题的创建元素中

这就是我试图在 html 代码中实现的目标（不需要创建 div，因为它已经在 html 代码中了）

function addToList(input) {
  console.log(x);
  let task = document.createElement('p');
  task.id = x;
  task.appendChild(document.createTextNode(input));
  document.getElementById('listOfTasks').appendChild(task);
  addCheckBox(x);
  x++;
}

function addCheckBox(id) {
  let checkBox = document.createElement('a');
  checkBox.className = 'button is-rounded is-small';
  checkBox.id = 'checkBox';
  document.getElementById(id).appendChild(checkBox);

  let a = document.createElement('span');
  a.className = 'icon is-small';
  a.id = 'apple';
  document.getElementById(id).appendChild(a);

  let b = document.createElement('i');
  b.className = 'fas fa-check';
  document.getElementById(id).appendChild(b);
}

<link rel="stylesheet"   href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"/>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    
<div class="container">
    <div id="listOfTasks"></div>
</div>
        
<section class="section">
    <div class="container">
        <div class="field box form-popup" id="addTask">
         <div class="control">
          <div class="field is-grouped">
           <label class="label"><b>Task to add</b></label>
                </div>
                 <input
               type="text"
               class="input"
               placeholder="Enter Task"
               id="task"
               required
              />
             </div>
            <button
             type="button submit"
             class="button is-success"
             id="submit"
             onclick="closeForm()"
             >
              Add
         </button>
        </div>
    </div>
</section>

当前输出显示为

如果有人知道更好的方法，将不胜感激

Answer 1

制作一个函数，在创建元素时减少样板代码

function create(name, props, children) {
  let elem = document.createElement(name); // create it
  const parent = props.parent              // we use parent prop elsewhere
  let keys = Object.keys(props)            // collect keys
  keys = keys.filter(function(key) {       // remove parent prop from keys
    return key !== 'parent'
  })
  keys.forEach(function(key) {             // assign props to element
    elem.setAttribute(key, props[key])
  })
  if (children && children.length) {       // add children to element
    children.forEach(function(child) {
      elem.appendChild(child)
    })
  }
  if (parent) {                            // attach to parent
    document.getElementById(id).appendChild(elem);
  }
  return elem                              // return it, to customize further
}

然后

function addCheckBox(id) {
  create('a', {
    id: 'checkBox',                          // simple prop
    parent: id,                              // parent prop
    class: 'button is-rounded is-small'  // simple prop
  })
  var span = create('span', {
    parent: id,
    id: 'apple',
    class: 'icon is-small'
  }, [create('i', {                      // demo of children
    class: 'fa fa-check'
  }])
  span.setAttribute('data-something', 1) // demo of customizing
}

使用 javascript 与创建元素中的某些元素创建多个元素

Creating multiple elements using javascript with some element in created element

javascript

html

appendchild

bulma

documentfragment