Create a duplicate of a div using JavaScript and modify the IDs of the inner elements within

Question

Create a duplicate of a div using JavaScript and modify the IDs of the inner elements within

I have two static div tags with a select tag and a text box inside, each with different IDs. When I clone the tag, it duplicates the same div tag in the DOM. How can I change the inner elements' tags?

Below is the code snippet:

        <div id="masterGrade" style="border-style: solid; width: 200px">
        <select id="selectGrade1">
            <option value="grade1">Grade 1</option>
            <option value="grade2">Grade 2</option>
            <option value="grade3">Grade 3</option>
            <option value="grade4">Grade 4</option>
        </select>
        <input type="text" id="text1"/>
    </div>
    <div style="border-style: solid;width: 200px">
        <select id="selectGrade2">
            <option value="grade1">Grade 1</option>
            <option value="grade2">Grade 2</option>
            <option value="grade3">Grade 3</option>
            <option value="grade4">Grade 4</option>
        </select>
        <input type="text" id="text2"/>
    </div>

My JavaScript function:

    $scope.addGrade = function() {  

        var div = document.getElementById('masterGrade'),
        clone = div.cloneNode(true); 
        clone.id = "some_id";
        document.body.appendChild(clone);
    }

If you have any suggestions or solutions, please share them. Thank you!

javascript angularjs

Answer 1

Answer №1

Mixing the DOM api with angular is not considered a recommended practice. It is preferable to follow the Angular way (ng-repeat)

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.grades = [{}];
  $scope.addGrade = function() {
    $scope.grades.push({});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
  <button ng-click='addGrade()'>Add</button>
  <div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
    <select ng-model='grade.list'>
      <option value="grade1">Grade 1</option>
      <option value="grade2">Grade 2</option>
      <option value="grade3">Grade 3</option>
      <option value="grade4">Grade 4</option>
    </select>
    <input type="text" ng-model='grade.text' />
  </div>
  {{grades}}
</div>

Fiddle Demo

Edit: When dealing with the index, utilize $index. The ngRepeat directive creates a template for each item in a collection. Each template has its own scope, where the loop variable represents the current collection item, and $index refers to the item index.

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.grades = [{}];
  $scope.addGrade = function() {
    $scope.grades.push({});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
  <button ng-click='addGrade()'>Add</button>
  <div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
    <label for="select{{$index}}">Grade {{$index}}:</label>
    <select id='select{{$index}}' ng-model='grade.list'>
      <option value="grade1">Grade 1</option>
      <option value="grade2">Grade 2</option>
      <option value="grade3">Grade 3</option>
      <option value="grade4">Grade 4</option>
    </select>
    <br>
    <label for="text{{$index}}">Text{{$index}}:</label>
    <input id='text{{$index}}' type="text" ng-model='grade.text' size='10' />
  </div>
  {{grades}}
</div>

Fiddle Demo

Answer 2

Mixing the DOM api with angular is not considered a recommended practice. It is preferable to follow the Angular way (ng-repeat)

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.grades = [{}];
  $scope.addGrade = function() {
    $scope.grades.push({});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
  <button ng-click='addGrade()'>Add</button>
  <div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
    <select ng-model='grade.list'>
      <option value="grade1">Grade 1</option>
      <option value="grade2">Grade 2</option>
      <option value="grade3">Grade 3</option>
      <option value="grade4">Grade 4</option>
    </select>
    <input type="text" ng-model='grade.text' />
  </div>
  {{grades}}
</div>

Fiddle Demo

Edit: When dealing with the index, utilize $index. The ngRepeat directive creates a template for each item in a collection. Each template has its own scope, where the loop variable represents the current collection item, and $index refers to the item index.

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.grades = [{}];
  $scope.addGrade = function() {
    $scope.grades.push({});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
  <button ng-click='addGrade()'>Add</button>
  <div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
    <label for="select{{$index}}">Grade {{$index}}:</label>
    <select id='select{{$index}}' ng-model='grade.list'>
      <option value="grade1">Grade 1</option>
      <option value="grade2">Grade 2</option>
      <option value="grade3">Grade 3</option>
      <option value="grade4">Grade 4</option>
    </select>
    <br>
    <label for="text{{$index}}">Text{{$index}}:</label>
    <input id='text{{$index}}' type="text" ng-model='grade.text' size='10' />
  </div>
  {{grades}}
</div>

Create a duplicate of a div using JavaScript and modify the IDs of the inner elements within

Answer №1

Fiddle Demo

Fiddle Demo

Similar questions

Fixing TypeError in React App: How to Resolve the "Cannot read property 'prototype' of undefined" Issue

The failover process for PayPal involves seamless transitions to backup systems in the

Issues with JQuery scroll() / scrollTop() functionality in Internet Explorer and Firefox

Flexible array for varying results

Combining ServiceStack with MVC and AngularJs for optimal integration

Execute a function once all images have finished loading

What are the steps for implementing oncopy in Angular?

Are there more efficient methods than having to include require('mongoose') in each models file?

How can we toggle a function to expand or collapse fields generated in an ngFor loop?

Error in Redux reducer file caused by an incorrect data type in action.payload

What is the method for creating an array of strings in VueJS?

Combine, condense, and distribute JavaScript files using Express without applying gzip compression to the response

Comparing Fetch and Axios: Which is Better?

Updating dropdown values using another dropdown through AJAX in Node.js: A step-by-step guide

Troubleshooting ASP.NET MVC3: The mystery behind why my custom validation attributes always seem to fail

Guide on adding an additional key:value pair to a sub document in a MongoDB collection

Retrieving the output of an asynchronous function within another function in JavaScript

Obtain the value of "data-something" attribute from an <option> element within a <select> element

Guide to updating information in Firestore using Node.js, embedded in a map array

A simple way to verify which option has been chosen has been altered