Question

我有一些代码可以将元素附加到div。当我在电脑上试用它时，没关系。但是当我在手机上试用它时（在Chrome调试器上）显示该元素出现在“元素”视图中，但它需要很长时间才能显示在实际屏幕上。

我的代码是：
$('.addField').click(function(){ this.parentNode.innerHTML = this.parentNode.innerHTML + '<div class="block"><input class="noBorder name" type="text" placeholder="Name"><input class="noBorder value" type="text" placeholder="Value"><a class="removeField" href="#">X</a></div>'; });

Answer 1

通过执行innerHTML更新来添加元素意味着浏览器必须删除并清理以前的DOM子树，解析新的HTML内容，并构建一组全新的DOM节点。

您最好创建新元素并使用.appendChild()附加它们。

编辑 - 使用jQuery的更好方法是

$('.addField').click(function(){
  var block = $("<div/>", { "class": "block" });
  block.append($("<input/>", {
    "class": "noBorder name",
    placeholder: "Name"
  }))
  .append($("<input/>", {
     "class": "noBorder value",
     placeholder: "Value"
  }))
  .append($("<a/>", {
    "class": "removeField",
    "href": "#",
    "text": "X"
  }));
  $(this).parent().append(block);
});

DOM添加元素后需要很长时间才能更新

1 个答案: