Question

这是否可以在angularjs / jquery / javascript中使用？

<div ng-init="font='h2'">
  <h1> h1 is this size </h1>
  <{{font}}> this is a {{font}}</{{font}}>
</div>

如何动态更改html标签？提前谢谢。

ps：我已经尝试过这段代码，但没有成功。

Answer 1

您可以使用自定义指令执行此操作：

var app = angular.module('app', []);
app.controller('MyController', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.font = 'h2';
  $timeout(function() {
    $scope.font = 'h3';
    $timeout(function() {
      $scope.font = 'h4';
      $timeout(function() {
        $scope.font = 'h5';
      }, 1000);
    }, 1000);
  }, 1000);
}]);

app.directive('font', function($interpolate, $compile) {
  return {
    restrict: 'E',
    scope: false,
    link: function($scope, $element, $attr) {
      var content = $element.html();
      $scope.$watch('font', function(newVal) {
        $element.contents().remove();
        var tag = $interpolate('<{{font}}>{{content}}</{{font}}>')
          ({
            font: $scope.font,
            content: content
          });
        var e = angular.element(tag);
        $element.append($compile(e)($scope));
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-init="font='h2'" ng-app="app" ng-controller="MyController">
  <h1> h1 is this size </h1>
  <font>This is a {{font}}</font>
</div>

Answer 2

就jQuery而言，您可以使用replaceWith()方法。您只需要在点击事件期间保留文本/类。

$(function() {
  $('.button').on('click', function() {
    var $span = $('.span');
    var lvl = $(this).data('lvl');
    
    $span.replaceWith(`<${lvl} class="span">${$span.text()} as an ${lvl}<${lvl}>`);  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="button" data-lvl="h2">Change to h2</button>
<button class="button" data-lvl="h5">Change to h5</button>

<div ng-init="font='h2'">
  <h1>h1 is this size </h1>
  <span class="span">this is a font</span>
</div>

Answer 3

这是一个简单的Javascript解决方案：

var i=0;
setInterval(function()
{
  document.getElementById("changeable").outerHTML = "<h" + (i+1) + " id=\"changeable\">" + document.getElementById("changeable").innerHTML + "</h" + (i+1) + ">";
  i++;
  if(i>=5){
    i=0;
  }
},1000);

<div>
  <h1> h1 is this size </h1>
  <h2 id="changeable"> this is a header tag</h2>
</div>

Answer 4

当然可以使用JavaScript和JQuery。

JavaScript：使用document.getElementById（＆＃34; MyId＆＃34;）。outerHTML

JQuery：请参阅此参考资料 - http://api.jquery.com/insertAfter/#selector

通过JavaScript修改DOM元素似乎是一种不好的做法（尽管可能）

如果您使用Angular，我建议您使用ng-if或ng-if和ng-include的组合，如果您想要有条件地加载新视图/ html

如何动态更改html标签？

4 个答案: