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

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

const textNode = document.createTextNode('這是一段純文本內容');
//可以把這個文本節點添加到元素中newDiv.appendChild(textNode);

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

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

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

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

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

//創建一個新節點const newHeading = document.createElement('h2');newHeading.textContent = '新的標題';
//獲取要被替換的節點和父節點const oldHeading = document.getElementById('old-heading');const parent = oldHeading.parentNode;
//替換節點parent.replaceChild(newHeading, oldHeading);

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

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

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

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

//創建一個評論列表功能function addComment(name, text) {  //創建文檔片段  const fragment = document.createDocumentFragment();
  //創建評論容器  const commentDiv = document.createElement('div');  commentDiv.className = 'comment';
  //創建用戶名標題  const nameHeading = document.createElement('h3');  nameHeading.textContent = name;
  //創建評論文本  const textParagraph = document.createElement('p');  textParagraph.textContent = text;
  // 創建刪除按鈕  const deleteButton = document.createElement('button');  deleteButton.textContent = '刪除';  deleteButton.className = 'delete-btn';
  //組裝評論  commentDiv.appendChild(nameHeading);  commentDiv.appendChild(textParagraph);  commentDiv.appendChild(deleteButton);
  //添加到片段  fragment.appendChild(commentDiv);
  //獲取評論列表容器  const commentsContainer = document.getElementById('comments');
  //如果有評論,就插入到第一個位置,否則直接添加  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(); // 現代方法    // 或者用舊方法：    // comment.parentNode.removeChild(comment);  }});
// 使用示例addComment('張三', '這篇文章太棒了！');addComment('李四', '學到了很多新知識！');