0

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

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

我还需要将一个 create 元素附加到另一个 create 元素中，这会增加问题

这就是我试图在 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>

电流输出显示为

如果有人知道更好的方法来做到这一点，将不胜感激

4

1 回答 1

0

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

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
}
于 2019-07-18T18:05:13.947 回答