Question

我正在尝试实现jQuery append（）的通用js替代方案，因为我需要它在Internet Explorer中工作。

我需要替换$（'＃id2）.append（link）;

我尝试添加innerHTML并插入到parentNode中，但是出现错误“无法读取未定义的属性'insertBefore'”

  let condition = false;
  let link = '';

  if (condition === true) {

    link = `<li class="list>List</li>`;

    $('#id1').prepend(link);
  }
  else {

    link = `<a id="button">Button</a>`;
    $('#id2').append(link);
  }

标记：

<div id="id1">

    <input type="submit" id="id2">

</div>

上面的代码在除IE11之外的所有浏览器中都可以正常运行，这是必需的。我试图替换$（'＃id2）.append（link）;使用下面的代码，但得到错误“ insertBefore”的未定义“：

    const div = document.querySelectorAll('#id2');
    const newText = document.createElement('div');
    const newText2 = newText.innerHTML = link;
    div.parentNode.insertBefore(newText2, div.nextSibling);

谢谢。

Answer 1

您需要使用DOM元素，而不是字符串。然后，您可以按如下所示追加或添加前缀：

// Create and configure DOM elements that will be used:
let a = document.createElement("a");
a.id = "button";
a.textContent = "Button";

let li = document.createElement("li");
li.classList.add("list");
li.textContent = "List";

// Get reference to the node to prepend/append to:
let target = document.getElementById("id1");

let answer = +prompt("1 = prepend, 2 = append");

if (answer === 1) {
   target.parentNode.insertBefore(a, target);
} else {
   target.appendChild(li);
}

<body>

  <div id="id1">
    <input type="submit" id="id2">
  </div>
  
</body>

IE11中JQuery append（）的JavaScript替代品

1 个答案: