我有<div>具有相同 class 和按鈕的盒子。單擊按鈕時，應將文本框添加到相應的框中</div><div id="text_translate"><p><a href="https://i.stack.imgur.com/tP1dL.png" rel="nofollow noreferrer">在按下第二個“添加任務”按鈕時，應將一個文本框添加到第二個 div，類似於 3rd、4th</a>我如何引用特定的 div 元素？無論按下哪個按鈕，我在下面所做的都會將文本框添加到第一個 div。</p><p> HTML</p><pre> <body> <div id="project"> LIST IT </div> <div id="board"> Java Project </div> <template id="listTemp"> <form class="frm" > <input type="text" placeholder="Enter list name"> </form> <button type="button" name="task" class="lst btn btn-secondary" onclick="addTask()">Add Task</button> </template> <button type="button" name="list" class="btn btn-secondary" onclick="addList()">Add List</button> </body> <script src="index.js" charset="utf-8"></script></pre><p> JAVASCRIPT</p><pre> function addTask(){ var input = document.createElement('input'); input.placeholder="Enter task here"; input.type="text"; var br = document.createElement('br'); var parent = document.getElementsByClassName('frm')[0]; // parent.insertBefore(input,document.getElementsByClassName('lst')[0]); parent.appendChild(input); } function addList(){ var div = document.createElement('div'); div.innerHTML = document.getElementById('listTemp').innerHTML; div.className = 'ListBox'; document.getElementsByTagName('body')[0].appendChild(div); }</pre></div>

Question

在按下第二個“添加任務”按鈕時，應將一個文本框添加到第二個 div，類似於 3rd、4th我如何引用特定的 div 元素？ 無論按下哪個按鈕，我在下面所做的都會將文本框添加到第一個 div。

HTML

<body>
    <div id="project">
      LIST IT
    </div>
    <div id="board">
      Java Project
    </div>
  <template id="listTemp">
    <form class="frm" >
      <input type="text" placeholder="Enter list name">
    </form>
    <button type="button" name="task" class="lst btn btn-secondary" onclick="addTask()">Add Task</button>
  </template>
    <button type="button" name="list" class="btn btn-secondary" onclick="addList()">Add List</button>
  </body>
  <script src="index.js" charset="utf-8"></script>

JAVASCRIPT

function addTask(){
  var input = document.createElement('input');
  input.placeholder="Enter task here";
  input.type="text";
  var br = document.createElement('br');
  var parent = document.getElementsByClassName('frm')[0];
  // parent.insertBefore(input,document.getElementsByClassName('lst')[0]);
  parent.appendChild(input);

}
function addList(){
  var div = document.createElement('div');
  div.innerHTML = document.getElementById('listTemp').innerHTML;
  div.className = 'ListBox';
  document.getElementsByTagName('body')[0].appendChild(div);
}

Answer 1

要引用 div#project 你可以使用 document.querySelector('#project');

問題描述

1 個解決方案

解決方案1
0 2020-05-04 14:17:59

問題描述

1 個解決方案

解決方案1 0 2020-05-04 14:17:59

解決方案1
0 2020-05-04 14:17:59