Creating elements appended at different levels in an HTML file using JAVASCRIPT-CodePudding

update_5.enter().append("div")

    .append("form").merge(update_5)
    .attr("action",d => d.market)
    .attr("target","_blank")
    .style("width","100%")
    .style("height","282")
    
    .append("input").merge(update_5)
    .attr("type","submit")
    .attr("target","_blank")
    .style("width","100%")
    .attr("value","Jogo Betfair")

    .append("iframe").merge(update_5)
    .attr("src",d => valorparaiframe(d.value))
    .style("width","100%")
    .style("height","282");

The result is one element becoming the child of the other:

<div>
     <form>
           <input>
                  <iframe>

I'm looking to create several totally different appendages:

<div>
     <form>
           <input>
     <iframe>

How should I go about this?
I tried to use append and appendChild but the result was not positive to.

CodePudding user response：

Use:

const div = update_5.enter().append("div")

div.append("form").merge(update_5)
    .attr("action",d => d.market)
    .attr("target","_blank")
    .style("width","100%")
    .style("height","282")
    
    .append("input").merge(update_5)
    .attr("type","submit")
    .attr("target","_blank")
    .style("width","100%")
    .attr("value","Jogo Betfair")

div.append("iframe").merge(update_5)
    .attr("src",d => valorparaiframe(d.value))
    .style("width","100%")
    .style("height","282");

CodePudding user response：

If you want a pattern like this that "body > div > form > input". Plus, you want to add iframe Element as a child of div. You can do this easily by using appendChild() method in javascript. In this code, i make iframe Element as the last child of div. You can put iframe Element before any child element with the help of insertBefore() method.

// Creating some Elements
const div_node = document.createElement("div");
const form_node = document.createElement("form");
const input_node = document.createElement("input");
const iframe_node = document.createElement("iframe");
const body_element = document.getElementsByTagName("body")[0];

// Appending new created div Element inside the body tag of html
body_element.appendChild(div_node);
// Appending the form Element inside the div
div_node.appendChild(form_node);
// Appending the input Element inside the form
form_node.appendChild(input_node);
// Appending the iframe Element inside the div as the last child, not the child of input
div_node.appendChild(iframe_node);