Question

使用HTML5，我创建了一个简单的表，其中包含一系列配对字段（活动日志，时间）。我一直在网上搜索如何使用Javascript动态创建字段，但我只发现了如何一次创建一个字段（使用getElementById）。问题是我想创建一系列标签。这意味着，当用户点击＆＃34;添加另一个字段＆＃34;时，我希望JS在表格上生成另一行，带有一对字段，而不是必须对整个表格进行硬编码（下面的代码段只有两行，但我可能需要10-15行。

该表代码的片段如下所示。使用CSS，页面看起来就像在屏幕截图上一样。 screenshot：

我很感激任何帮助。提前谢谢。

＆＃13;

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="utf-8">
   <title>Activity Log</title>
   <link href="styles.css" rel="stylesheet">
   <script type="text/javascript" language="javascript" src="script.js"></script>

</head>

<body>
<div class="container">
    <div class="row">
        <div class="leftcol">
            <form name='mainForm' id='mainForm' method="get" action="http://www.randyconnolly.com/tests/process.php">
  <fieldset>
     <legend>Input Activity Logs</legend>
     <table id=tracklist>
      <tr>
        <th colspan="3">Track List: </th>
      </tr>
      <tr>
        <td>1</td>
        <td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td>
        <td><label>Time: </label><br/><input type="time" name="time1" class="required"></td>
      </tr>
      <tr>
        <td>2</td>
        <td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td>
        <td><label>Time: </label><br/><input type="time" name="time2" class="required"></td>
      </tr>
     </table>
     <input type="submit" />
  </fieldset>
</form>
        </div>

    </div>
</div>
</body>
</html>

＆＃13;

Answer 1

在html中添加<input type="button" onclick="cloneRow()" value="Clone Row" />之类的按钮，并在要复制的行中添加ID（例如<tr id="rowToClone">），然后在代码中添加以下javascript函数

 function cloneRow() {
     var row = document.getElementById("rowToClone"); // find row to copy
     var table = document.getElementById("tracklist"); // find table to append to
     var clone = row.cloneNode(true); // copy children too
     clone.id = "newID"; // change id or other attributes/contents
     table.appendChild(clone); // add new row to end of table
 }

Answer 2

添加元素的一些常用方法：

使用document.createElement创建您需要的元素，并使用document.appendChild或document.insertBefore将其添加到html。
使用element.insertAdjacentHTML添加元素。
使用jQuery和React等库。

Answer 3

您可以使用连接到“添加活动”按钮的.innerHTML + =方法。每次单击该按钮时，都会添加具有正确索引编号的新表行。这是一个完全有效的示例 - 为了简单起见并且只有一个文件，我将javascript直接包含在HTML代码中：

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="utf-8">
   <title>Activity Log</title>
   <script>

      // Wait until the window finishes loaded before executing any script
      window.onload = function() {

        // Initialize the activityNumber
        var activityNumber = 3;

        // Select the add_activity button
        var addButton = document.getElementById("add_activity");

        // Select the table element
        var tracklistTable = document.getElementById("tracklist");

        // Attach handler to the button click event
        addButton.onclick = function() {

        // Add a new row to the table using the correct activityNumber
          tracklistTable.innerHTML += '<tr><td>' + activityNumber + '</td><td><label>Activity Log: </label><br/><input type="text" name="actlog' + activityNumber + '" class="required"></td><td><label>Time: </label><br/><input type="time" name="time' + activityNumber + '" class="required"></td></tr>';

          // Increment the activityNumber
          activityNumber += 1;
        }

      }

   </script>

</head>

<body>
  <div class="container">
      <div class="row">
          <div class="leftcol">
              <form name='mainForm' id='mainForm' method="get" action="#">
                <fieldset>
                   <legend>Input Activity Logs</legend>
                   <table id="tracklist">
                    <tr>
                      <th colspan="3">Track List: </th>
                    </tr>
                    <tr>
                      <td>1</td>
                      <td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td>
                      <td><label>Time: </label><br/><input type="time" name="time1" class="required"></td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td>
                      <td><label>Time: </label><br/><input type="time" name="time2" class="required"></td>
                    </tr>
                   </table>
                   <input type="submit" />
                </fieldset>
              </form>
              <button id="add_activity">Add Activity</button>
          </div>
      </div>
  </div>
</body>
</html>

Answer 4

您需要的是document.createElemrnt(tagNameString); 该功能完全符合您的想法。然后你可以创建更多的元素，让他们成为另一个元素。

Answer 5

语法在这里：

`<span> ${data.d.name}</span>`

Answer 6

.nb-theme-default nb-alert {
  display: flex;
  align-items: center;
  flex-direction: row;
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  strHtml="<h1>hello</h1>"

  constructor() { }

  ngOnInit(): void {
  }
  insert(){
    let tag = document.getElementById("main");
    let text = document.createElement("H1");
    text.innerHTML = "new string element";
    tag.appendChild(text);
  }

}

HTML：使用JS动态添加元素

6 个答案: