Question

I have an HTMLCollection Object which i can use to manipulate the content of the HTMLCollection. I would like to know the way out to add a div element to the first, last or to any specific index of the HTMLCollection. Please suggest something. Here nDivs is the HTML Collection.

    var Div = document.createElement( div );
    for(i=0; i<9; i++){
        Div.appendChild(nDivs[0].children[0]);
    }
    Div.id = nDivs[0].id;
    nDivs[0].parentNode.removeChild(nDivs[0]);

    nDivs.appendChild(Div); //this is creating problem..need an alternative to this
    document.getElementById("ABC").appendChild(nDivs[nDivs.length - 1]);

Answer 1

According to the MDN docs

HTMLCollection is an interface representing a generic collection of elements (in document order) and offers methods and properties for traversing the list.

Because its an interface, you re restricted to interacting with an HTMLCollection via its methods. There are no methods there to modify the object, only to read it. You ll have to manipulate the DOM some other way.

以下是一些使用纯联合材料的建议,但我高度建议。任务请见。假设我们以新的内容重新开展工作<代码> Div and the Collection forms:

。

forms[1].parentNode.insertBefore(newDiv, forms[1]);

<后forms ***:>

// there is no insertAfter() so use the next sibling as reference element
forms[1].parentNode.insertBefore(newDiv, forms[1].nextSibling);

<<>replace>forms ?><>codes?>



forms[1].parentNode.replaceChild(newDiv, forms[1]);

<https://developer.mozilla.org/En/DOM/Node.insertBefore”rel=“noreferer”>insertBefore(,,。

Answer 2

你们需要在OMM中直接插入你的新内容。我们不能直接操纵只读的超声波。但是,不担心的是,你的“超声波”将作相应的更新:

// DOM helper functions:
const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


// Cache a reference to the wrapper parent Element 
const elParent = el("#parent-a");

// Cache a live HTMLCollection:
const collItems = elParent.children;

// Insert new elements in the DOM:
elParent.prepend(elNew("div", {textContent: "Item First (New)"}));
elParent.append(elNew("div", {textContent: "Item Last (New)"}));

// Check if the collection is live:
console.log(collItems.length); // 5

<div id="parent-a">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

如上所示(与你使用i:constcolItems = elParent.querySelectorAll(项目”)相反); 活度的超文本录相报告,共有5名儿童。

Also, you can see how to append and prepend an item as first or last.
To answer your other question:

http://www.un.org。

you can use:

// DOM helper functions:
const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const insertAtIndex = (idx, parent, ...els) => {
  els = els.flat();
  const ch = parent.children;
  if (idx >= ch.length) parent.append(...els);
  else ch[Math.max(idx, 0)].before(...els);
};

// Cache a reference to the wrapper parent Element 
const elParent = el("#parent-a");
// Cache a live HTMLCollection:
const collItems = elParent.children;
// Insert element/s at index
insertAtIndex(
  2,
  elParent,
  elNew("div", {textContent: "NEW item 1"}),
  elNew("div", {textContent: "NEW item 2"}),
);

console.log(collItems.length); // 4

<div id="parent-a">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

友情链接