使用JavaScript在HTML不同层级追加元素的实现方案咨询

根因说明 #

你使用的是D3.js的选择集操作API，每执行一次append都会返回刚刚新增的子元素的选择集，链式调用后续的操作默认都作用在这个最新的子元素上，所以才会出现逐层嵌套的结果。

解决方案 #

方案1：用变量存储上层选择集（推荐，可读性更高） #

单独保存最上层的div选择集，分别给它追加form和iframe两个同级子元素：

// 保存根div的选择集
const rootDiv = update_5.enter().append("div");

// 追加form元素，并在form内添加input
rootDiv.append("form").merge(update_5)
  .attr("action", d => d.market)
  .attr("target", "_blank")
  .style("width", "100%")
  .style("height", "282px") // 补充单位避免渲染异常
  .append("input")
  .attr("type", "submit")
  .attr("target", "_blank")
  .style("width", "100%")
  .attr("value", "Jogo Betfair");

// 直接给根div追加同级的iframe元素
rootDiv.append("iframe").merge(update_5)
  .attr("src", d => valorparaiframe(d.value))
  .style("width", "100%")
  .style("height", "282px");

方案2：使用.end()回溯选择集（无需额外变量） #

D3提供end()方法可以回到上一级的选择集，适合短链式调用场景：

update_5.enter().append("div")
  // 处理form和input逻辑
  .append("form").merge(update_5)
    .attr("action", d => d.market)
    .attr("target", "_blank")
    .style("width", "100%")
    .style("height", "282px")
    .append("input")
      .attr("type", "submit")
      .attr("target", "_blank")
      .style("width", "100%")
      .attr("value", "Jogo Betfair")
    .end() // 回到form选择集
  .end() // 回到根div选择集
  // 处理同级iframe逻辑
  .append("iframe").merge(update_5)
  .attr("src", d => valorparaiframe(d.value))
  .style("width", "100%")
  .style("height", "282px");

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