如何显示HTML字符串中的链接和图像

// 假设htmlStr是包含链接和图像的HTML字符串
const htmlStr = '<a href="https://example.com">Example Link</a> <img src="image.jpg" alt="Example Image">';

// 创建一个临时的div元素
const tempDiv = document.createElement('div');
// 将HTML字符串赋值给div的innerHTML属性，触发解析过程
tempDiv.innerHTML = htmlStr;

// 找到所有的链接和图像元素
const linkElements = tempDiv.getElementsByTagName('a');
const imgElements = tempDiv.getElementsByTagName('img');

// 遍历链接元素，显示链接
for (let i = 0; i < linkElements.length; i++) {
  const linkElement = linkElements[i];
  const href = linkElement.getAttribute('href');
  const text = linkElement.textContent;
  console.log('链接地址：', href);
  console.log('链接文本：', text);
  // 可以根据需要将链接元素添加到页面中
}

// 遍历图像元素，显示图像
for (let i = 0; i < imgElements.length; i++) {
  const imgElement = imgElements[i];
  const src = imgElement.getAttribute('src');
  const alt = imgElement.getAttribute('alt');
  console.log('图像源地址：', src);
  console.log('图像替代文本：', alt);
  // 可以根据需要将图像元素添加到页面中
}