相当于 angularjs ng-if 的 JavaScript

Question

如果我想在 DOM 上删除/添加元素我只使用 ng-if 并且它下面的代码没有编译成 DOM，我可以做同样的事情吗使用纯js？我不想在我的 js 代码中包含 HTML 代码。

使用 CSS 隐藏它:

<div id = "infoPage" style="display: none;">

仍然会将元素插入 DOM。

编辑

显示或不显示的条件是基于像这样的标志:

var show = false; //or true

Answer 1

你可以尝试这样的事情:

想法:

• 创建一个包含 currentElement 及其父级引用的对象(这样您就知道要添加到哪里)。
• 创建当前元素的克隆，因为您希望在删除后添加相同的元素。
• 使用 Object.defineProperty 创建属性。这样您就可以拥有自己的二传手，并且可以观察它的变化。
• 要切换元素，勾选
  • 如果值为真，则必须添加元素。但是检查相同的元素是否已经可用以避免重复。
  • 如果为假，删除元素。

var CustomNGIf = function(element, callback, propertyName) {
  var _value = null;

  // Create copies of elements do that you can store/use it in future 
  this.parent = element.parentNode;
  this.element = element;
  this.clone = null;

  // Create a property that is supposed to be watched
  Object.defineProperty(this, propertyName, {
    get: function() {
      return _value;
    },
    set: function(value) {
      // If same value is passed, do nothing.
      if (_value === value) return;
      _value = !!value;
      this.handleChange(_value);
    }
  });

  this.handleChange = function(value) {
    this.clone = this.element.cloneNode(true);
    if (_value) {
      var index = Array.from(this.parent.children).indexOf(this.element);

      // Check if element is already existing or not.
      // This can happen if some code breaks before deleting node.
      if (index >= 0) return;
      this.element = this.clone.cloneNode(true);
      this.parent.appendChild(this.element);
    } else {
      this.element.remove();
    }

    // For any special handling
    callback && callback();
  }
}

var div = document.getElementById('infoPage');
const propName = 'value';
var obj = new CustomNGIf(div, function() {
  console.log("change")
}, propName);

var count = 0;
var interval = setInterval(function() {
  obj[propName] = count++ % 2;
  if (count >= 10) {
    window.clearInterval(interval);
  }
}, 2000)

<div class='content'>
  <div id="infoPage"> test </div>
</div>

---