狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

//創(chuàng)建一個(gè)新的 div 元素const newDiv = document.createElement('div');
//給它加點(diǎn)內(nèi)容newDiv.textContent = '我是新來的div';
//加點(diǎn)樣式newDiv.style.backgroundColor = 'lightblue';newDiv.style.padding = '10px';

?const textNode = document.createTextNode('這是一段純文本內(nèi)容');
//可以把這個(gè)文本節(jié)點(diǎn)添加到元素中newDiv.appendChild(textNode);

// 獲取頁面中的容器const container = document.getElementById('container');
// 把我們之前創(chuàng)建的 div 添加進(jìn)去container.appendChild(newDiv);

//創(chuàng)建一個(gè)新元素const newParagraph = document.createElement('p');newParagraph.textContent = '我在中間';
//獲取參考節(jié)點(diǎn)const firstChild = container.firstChild;
//在第一個(gè)子節(jié)點(diǎn)前插入新段落container.insertBefore(newParagraph, firstChild);

const targetElement = document.getElementById('target');
// 四種插入位置targetElement.insertAdjacentHTML('beforebegin', '<div>beforebegin - 在元素前面</div>');targetElement.insertAdjacentHTML('afterbegin', '<div>afterbegin - 在元素內(nèi)部開頭</div>');targetElement.insertAdjacentHTML('beforeend', '<div>beforeend - 在元素內(nèi)部末尾</div>');targetElement.insertAdjacentHTML('afterend', '<div>afterend - 在元素后面</div>');

const link = document.createElement('a');
//設(shè)置屬性link.href = 'https://www.example.com';link.title = '示例網(wǎng)站';link.setAttribute('data-custom', 'value'); //自定義屬性
//修改樣式link.style.color = 'red';link.style.textDecoration = 'none';

//替換整個(gè)內(nèi)容(包括HTML)link.innerHTML = '<strong>點(diǎn)擊我</strong>';
//只設(shè)置文本內(nèi)容(更安全,防止XSS攻擊)link.textContent = '安全的文本內(nèi)容';
//追加內(nèi)容link.innerHTML += ' (追加的內(nèi)容)';

//創(chuàng)建一個(gè)新節(jié)點(diǎn)const newHeading = document.createElement('h2');newHeading.textContent = '新的標(biāo)題';
//獲取要被替換的節(jié)點(diǎn)和父節(jié)點(diǎn)const oldHeading = document.getElementById('old-heading');const parent = oldHeading.parentNode;
//替換節(jié)點(diǎn)parent.replaceChild(newHeading, oldHeading);

const original = document.getElementById('original');
// 淺克隆（只克隆節(jié)點(diǎn)本身，不包含子節(jié)點(diǎn)）const shallowClone = original.cloneNode(false);
// 深克隆（克隆節(jié)點(diǎn)及其所有子節(jié)點(diǎn)）const deepClone = original.cloneNode(true);
// 添加克隆的節(jié)點(diǎn)到文檔中document.body.appendChild(deepClone);

const parent = document.getElementById('parent');const child = document.getElementById('child-to-remove');
//移除子節(jié)點(diǎn)parent.removeChild(child);

const elementToRemove = document.getElementById('remove-me');elementToRemove.remove(); //直接從DOM中移除自己

//創(chuàng)建一個(gè)文檔片段const fragment = document.createDocumentFragment();
//向片段中添加多個(gè)元素for (let i = 0; i < 100; i++) {  const newItem = document.createElement('li');  newItem.textContent = `項(xiàng)目 ${i}`;  fragment.appendChild(newItem);}
//一次性添加到DOM中document.getElementById('list').appendChild(fragment);

//創(chuàng)建一個(gè)評(píng)論列表功能function addComment(name, text) {  //創(chuàng)建文檔片段  const fragment = document.createDocumentFragment();
  //創(chuàng)建評(píng)論容器  const commentDiv = document.createElement('div');  commentDiv.className = 'comment';
  //創(chuàng)建用戶名標(biāo)題  const nameHeading = document.createElement('h3');  nameHeading.textContent = name;
  //創(chuàng)建評(píng)論文本  const textParagraph = document.createElement('p');  textParagraph.textContent = text;
  // 創(chuàng)建刪除按鈕  const deleteButton = document.createElement('button');  deleteButton.textContent = '刪除';  deleteButton.className = 'delete-btn';
  //組裝評(píng)論  commentDiv.appendChild(nameHeading);  commentDiv.appendChild(textParagraph);  commentDiv.appendChild(deleteButton);
  //添加到片段  fragment.appendChild(commentDiv);
  //獲取評(píng)論列表容器  const commentsContainer = document.getElementById('comments');
  //如果有評(píng)論,就插入到第一個(gè)位置,否則直接添加  if (commentsContainer.firstChild) {    commentsContainer.insertBefore(fragment, commentsContainer.firstChild);  } else {    commentsContainer.appendChild(fragment);  }}
//添加刪除功能document.getElementById('comments').addEventListener('click', function(e) {  if (e.target.classList.contains('delete-btn')) {    const comment = e.target.closest('.comment');    comment.remove(); // 現(xiàn)代方法    // 或者用舊方法：    // comment.parentNode.removeChild(comment);  }});
// 使用示例addComment('張三', '這篇文章太棒了！');addComment('李四', '學(xué)到了很多新知識(shí)！');