HTML: 使用JS动态添加元素

Question

HTML: 使用JS动态添加元素

7

使用HTML5，我创建了一个简单的表格，它由一系列成对的字段（活动日志、时间）组成。我一直在网上搜索如何使用JavaScript动态创建字段，但我只发现了如何一次创建一个字段（使用getElementById）。问题是当用户点击“添加其他字段”时，我希望JS在表格上生成另一个行，而不是硬编码完整的表格（下面的代码片段仅有两行，但我可能需要10-15行）。

下面是表格的部分代码片段。使用CSS，页面看起来就像屏幕截图中的样子。

我会非常感激任何帮助。提前感谢您的帮助。

<!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>

- Emilio Zaidman

7个回答

4

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

使用 document.createElement 创建所需元素，然后使用 document.appendChild 或 document.insertBefore 将其添加到 HTML 中。
使用 element.insertAdjacentHTML 添加元素。
使用像 jQuery 和 React 这样的库。

- L_K

2

在你的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
 }

- Hector Barbossa

1

如果我们谈论JavaScript特别是（不是jQuery），那么有一个document.createElement()方法可用。该方法需要一个参数，即您想要添加的元素类型。一旦创建了元素对象，您需要将其附加到HTML DOM中，就像这样：

const para = document.createElement("p");
para.innerText = "This is a dynamic paragraph added";
document.body.appendChild(para);

<html>
<body>
</body>
</html>

你可以在这里阅读更多关于DOM 和 createElement 方法的内容。

- Ankit21ks

1

@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);
  }

}

<div class="container pt-3 mx-auto">
    <div id="main" [innerHtml]="strHtml"></div>
    <button class="btn btn-primary mt-4" (click)="insert()">New</button>
</div>

- Sandeep Kaushik

1

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释可以极大地提高其长期价值，因为它展示了为什么这是解决问题的好方法，并使它对未来读者具有其他类似问题更加有用。请编辑您的答案，添加一些解释，包括您所做的假设。 - jasie

0

你需要的是 document.createElemrnt(tagNameString); 这个函数可以做你想要的事情。然后你可以创建更多的元素并将它们作为另一个元素的子元素。

- Richard Barker

0

语法在这里：

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

- babak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- samcervantes · Accepted Answer

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

<!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>