Question

我正在尝试使用javascript一遍又一遍地创建一组元素，只要用户输入文字，该文字就会在其侧面显示带有图像的按钮，但该文字无法显示一种有效地做到这一点的方法。

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

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

这是我要在html代码中实现的目标（不再需要像在html代码中那样创建div）

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创建多个元素，并在创建的元素中添加一些元素

1 个答案: