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>