HTML: Add elements dynamically using JS

Question

Working with HTML5, I have created a simple table that consists of a series of pair fields (Activity log, time). I've been searching on the web how to dynamically create fields using Javascript, but I've only found how to create one field at a time (using getElementById). The thing is that I'd like to create a series of tags. Meaning, when the user clicks on "add another field", I'd like that JS to generate another row on the table, with a pair of fields, instead of having to hard code the complete table (the snippet below only has two rows, but I'd probably need 10-15 rows).

The snippet of the code for the table appears below. Using CSS the page looks as it's on the screenshot.

I'd appreciate any help. Thanks in advance.

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

score 5 · Accepted Answer · answered Jun 17 '16 at 04:08

You can use the .innerHTML += method wired up to an "Add Activity" button. Each time you click the button a new table row is added with the correct index numbers. Here is a fully working example - for the sake of simplicity and having only one file, I've included the javascript directly in the HTML code:

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

score 4 · Answer 2 · answered Jun 17 '16 at 03:31

4

Some popular ways to add element:

Use document.createElement to create element you need, and use document.appendChild or document.insertBefore to add it to html.
Use element.insertAdjacentHTML to add element.
Use libraries like jQuery and React.

answered Jun 17 '16 at 03:31

L_K

2,838
2
16
36

score 2 · Answer 3 · answered Jun 17 '16 at 03:30

Add a button like <input type="button" onclick="cloneRow()" value="Clone Row" /> in your html and add a id to the row to be copied (exm. <tr id="rowToClone">) then add the following javascript function in your code

 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
 }

score 1 · Answer 4 · answered Nov 26 '20 at 11:08

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>

answered Nov 26 '20 at 11:08

Sandeep Kaushik

11
2

1

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – jasie Nov 26 '20 at 13:44

score 1 · Answer 5 · answered Sep 11 '22 at 16:34

If we talk about JavaScript Specifically(Not about jQuery), there is a document.createElement() method available. This method takes one argument and that is type of element which you want to add. Once the element object is created, you need to append it to HTMl DOM like this:

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

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

You can read more here about DOM and createElement method.

score 0 · Answer 6 · answered Jun 17 '16 at 03:24

0

What you need is document.createElemrnt(tagNameString); That function does exactly what you think. Then you can create more elements and make them children of another.

answered Jun 17 '16 at 03:24

Richard Barker

1,161
2
12
30

babak · Answer 7 · 2020-05-21T17:13:27.697

0

Syntax is here:

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

edited May 21 '20 at 17:13

answered May 20 '20 at 15:15

babak

1
1
1

HTML: Add elements dynamically using JS

7 Answers7

Linked