javascript - 如何定义 .append() 创建的元素的宽度和 ID？

Question

我正在尝试创建一个select具有width="347px"和的元素id="select-box-1"，该元素是从中创建的.append("select")，我已经尝试搜索.append()但解释导致我尝试失败。

失败的尝试：

.append("<select id='select-box-1' style='width: 347px'></select>")

我的脚本的原始部分创建.append()：

<script src="http://d3js.org/d3.v3.js"></script>
<script id="script-da-caixa-de-selecao-suspensa-1">
    function caixasuspensa1(error, data) {
      var select = d3.select("#caixa-suspensa-1")
        .append("select")

注意：此功能适用于D3.js

完整的脚本以防测试：

<script src="http://d3js.org/d3.v3.js"></script>
<script id="script-da-caixa-de-selecao-suspensa-1">
    function caixasuspensa1(error, data) {
      var select = d3.select("#caixa-suspensa-1")
        .append("select")
    
      select
        .on("change", function(d) {
          var value = d3.select(this).property("value");
          document.querySelector('#barra-de-texto-para-radar-1').value = value;
          document.getElementById('botao-do-radar-1').click();
        });
    
      select.selectAll("option")
        .data(data)
        .enter()
          .append("option")
          .attr("value", function (d) { return d.value; })
          .text(function (d) { return d.label; });
    }
    
    d3.csv("Lista_de_Jogos.csv", function(error, data){caixasuspensa1(error, data)});
</script>

标签： javascripthtmld3.jsappend

Answer 1

您可以尝试附加到innerHTML：

document.body.innerHTML+="<select id='select-box-1' style='width: 347px'></select>";

或使用insertAdjacentHTML()：

document.body.insertAdjacentHTML("afterend", "<select id='select-box-1' style='width: 347px'></select>");