javascript append at specific index document.querySelector

Question

我正在尝试创建一个新元素并将其插入 document.querySelector('.content'); 在特定指数？ 我下面的简单代码。

const container = document.querySelector('.content');
var counter = 0;
var p = document.createElement('p');
p.textContent = "INSERT NEW"
var buttonOne = document.createElement('button');
buttonOne.className = "btnClass";
buttonOne.innerText = "Insert";
buttonOne.onclick =  function() {
    var buttonTwo = document.createElement('button');
    buttonTwo.className = "btnClass";
    buttonTwo.innerText = "new";
    var nodes = Array.prototype.slice.call(document.getElementById('container').children);
    var index = nodes.indexOf(this);
    var c = document.createElement('p');
    c.textContent = "inserted new p";
    **container.append(c, buttonTwo, index++); <-- something like this**
};

for (let i = 0; i < 5; i++) {
    var p = document.createElement('p');
    p.textContent = "Index" + " " + i 
    container.append(p, buttonOne);
}

例如; 如果我有 10 个按钮。 点击 3rd，它应该在 4th 添加一个新元素并推送 rest。这可能吗？ 或任何其他选择？

Answer 1

使用Element.insertAdjacentHTML()可以为您完成这项工作。

Element 接口的 insertAdjacentHTML() 方法将指定的文本解析为 HTML 或 XML，并将结果节点插入 DOM 树中指定的 position 处。

我不知道你真的想如何实现你的代码，但这是一个例子，我将你所有的索引p替换为a标签，当你按下任何button时，它会在该特定元素之后插入元素。

 const container = document.querySelector('.content'); var counter = 0; var p = document.createElement('p'); p.textContent = "INSERT NEW" var buttonOne = document.createElement('button'); buttonOne.className = "btnClass"; buttonOne.innerText = "Insert"; buttonOne.onclick = function() { var buttonTwo = document.createElement('button'); buttonTwo.className = "btnClass"; buttonTwo.innerText = "new"; var nodes = Array.prototype.slice.call(document.getElementById('container').children); var index = nodes.indexOf(this); var c = document.createElement('p'); c.textContent = "inserted new p"; }; for (let i = 0; i < 5; i++) { var p = document.createElement('button'); p.className = 'index' p.textContent = "Index" + " " + i container.append(p, buttonOne); } const allindex = document.querySelectorAll('.index') allindex.forEach((i, index) => { i.addEventListener('click', () => { allindex[index].insertAdjacentHTML("afterend", "<button>newbutton</button>") }) })

 <div class='content'></div>