使用JavaScript修改img src、href属性及向HTML列表添加li项的方法

需求说明 #

需要完成两类DOM操作：

• 修改首页菜单项：更新列表中首页项的img图片地址、对应a标签的跳转地址、锚文本内容
• 新增菜单项：向现有HTML列表中动态插入新的li列表项

原有代码问题 #

之前的代码存在元素选择层级错误：

• 代码直接选中了class为home的<li>元素，但src是li内部img标签的属性、href是li内部a标签的属性，直接给li元素设置这两个属性完全无效
• 直接修改li的innerHTML会把li内部嵌套的img、a标签全部替换成纯文本，彻底破坏菜单结构

正确实现代码 #

// ========== 第一部分：修改现有首页菜单项 ==========
// 先获取首页菜单项的li容器
const homeItem = document.querySelector('li.home');
// 修改内部img的src属性
homeItem.querySelector('img').src = 'imagelink.png';
// 获取内部的a标签，修改href和锚文本
const homeLink = homeItem.querySelector('a');
homeLink.href = 'http://www.cnn.com/';
homeLink.textContent = 'Main';

// ========== 第二部分：动态添加新的li列表项 ==========
// 获取菜单的父级ul容器
const menuContainer = document.querySelector('ul.m_menu_ul');
// 创建新的li元素
const newMenuItem = document.createElement('li');
// 配置新li的样式类、内部图标和链接（按需替换成实际业务内容）
newMenuItem.className = 'new-item';
newMenuItem.innerHTML = `
  <img src="ld_menu_icon_new.png">
  <a href="new-page.html">New Menu Item</a>
`;
// 将新li插入到菜单列表末尾
menuContainer.appendChild(newMenuItem);

效果参考 #

内容的提问来源于stack exchange，提问作者Attaullah