Load html element inside html page

Question

I have an index.html page that show a graph made with d3.js. I would like to add a stepper to the index.html page when I click on a tree node.

So in my app.js I have the following code portion:

var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      .on("click", click)
      .on("dblclick", dblclick)
      .on('mouseover', function(d) {
        fade(0.1)(d)
      })
      .on('mouseout', function(d) {
        fade(1)(d);
      })

So.. associated with the click I would like there to be a function (click) that loads the following html callded stepper.html that has the following path in my app -> views/stepper.html

<div class="step">
  </br></br></br>
    <md-card ng-init="step2.disabled = true; step3.disabled = true; selected = 0">
      <md-steppers  md-selected="selected" md-stretch-steppers="always">
        <md-step label="Lab1" md-complete="step1.completed"> 
          <md-content>
            <iframe id="iframe0" name="myIframe0" frameborder="5" width="1500" height="1500"></iframe>
            <md-button type="submit" class="md-raised md-primary" ng-click="selected = 1; step1.completed=true; step2.disabled = false">NEXT</md-button>
          </md-content>
        </md-step>
        <md-step label="Lab2" md-complete="step2.completed" ng-disabled="step2.disabled">
          <md-content>
            <iframe id="iframe1" name="myIframe1" frameborder="5" width="1500" height="1500"></iframe>
            <md-button class="md-raised md-primary" ng-click="selected = 0">PREV</md-button>
            <md-button class="md-raised md-primary" ng-click="selected = 2; step2.completed=true; step3.disabled=false">NEXT</md-button>
          </md-content>
        </md-step>
        <md-step label="End" md-complete="step3.completed" ng-disabled="step3.disabled">
          <md-content>
            <h1>
            All done!
            </h1>
            <h5> </br> You have completed this training path. </br> You can go back through the labs or select another training.
            </h5>
            <md-button class="md-raised md-primary" ng-click="selected = 1">PREV</md-button>
            <md-button class="md-raised md-primary" ng-click="step2.disabled = true; step3.disabled = true; selected = 0">START</md-button>
          </md-content>
        </md-step>
      </md-steppers>
    </md-card>
  </div>

I tried with the .load jQuery method which apparently is deprecated so i would like an alternative to this which doesn't work:

$(function(){
  $("#includedContent").load("views/stepper.html"); 
});