如何在JavaScript中返回含自定义变量的HTML并生成指定嵌套div？

首先得纠正你写的HTML里的小错误：class=id="hello" 是无效语法，应该是 class="hello"（如果是类名）或者 id="hello"（如果是唯一标识），不能把class和id混写在一起。

另外，直接返回固定的HTML块肯定不行，因为你需要把img的src设置为对象的url属性。这里同样推荐用模板字符串实现，或者更安全的DOM方法：

方案1：模板字符串实现 #

// 假设你的图片URL对象是这样的
const imageData = { url: "https://example.com/your-image.png" };

function generateHelloBlock() {
  return `
    <div class="hello"> <!-- 修正语法，这里用class还是id看你的需求 -->
      <h1 class="header-1"></h1>
      <img src="${imageData.url}" alt="图片描述"> <!-- 动态插入src，别忘了加alt属性提升语义化 -->
      <p class="paragraph-1"></p>
    </div>
  `;
}

// 调用并插入页面
document.body.innerHTML = generateHelloBlock();

方案2：DOM API实现（更安全） #

如果图片URL可能来自不可信源，用这种方式可以避免潜在的XSS问题：

const imageData = { url: "https://example.com/your-image.png" };

function generateHelloBlockElement() {
  const wrapper = document.createElement('div');
  wrapper.className = 'hello'; // 或者 wrapper.id = 'hello'
  
  const header = document.createElement('h1');
  header.className = 'header-1';
  wrapper.appendChild(header);
  
  const img = document.createElement('img');
  img.src = imageData.url;
  img.alt = "图片描述";
  wrapper.appendChild(img);
  
  const para = document.createElement('p');
  para.className = 'paragraph-1';
  wrapper.appendChild(para);
  
  return wrapper;
}

// 插入页面
document.body.appendChild(generateHelloBlockElement());

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