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

AngularJS's $resource module returns an empty array as a response

unable to effectively test promises with stubs using nodejs mocha

Connect various models together, or create synchronized computed properties

javascript code not functioning properly

What is the best way to access the image source attribute within a directive?

Express & React: Be cautious of client checksum and style while server-side rendering

What issue is being encountered with this JavaScript generated by PHP?

Updating ES6 syntax for superset in array: a step-by-step guide

Javascript Error - Issue with Fuse.js: e.split() function is not recognized

What is the best way to update my lowdb database directly from the frontend in a next.js application?

What is the best method for retrieving an item from localstorage?

Ways to transmit data from autocorrect to a higher-level class

Deactivating elements on a website

Having trouble with the HTML5 canvas for loop not rendering the initial object in the array?

The message from Vee-validate indicates that the validator 'required_if' does not exist within the system

Date selection feature in Material UI causing application malfunction when using defaultValue attribute with Typescript

Firefox displays an error when using jQuery.load(), but Chrome functions properly without any issues

How can I display a calendar with a complete month view using ng-repeat?

Encountering issues with integrating NPM package into Meteor.js

Refreshing a view in Laravel after a successful insertion using JQuery Ajax