Блог

Главная - Вопросы по программированию - Создание элементов, добавляемых на разных уровнях в HTML-файл с использованием JAVASCRIPT

Создание элементов, добавляемых на разных уровнях в HTML-файл с использованием JAVASCRIPT

#javascript #html

Вопрос:

 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");

В результате один элемент становится потомком другого:

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

Я хочу создать несколько совершенно разных придатков:

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

Как мне следует поступить с этим?
Я пытался использовать append и appendChild , но результат не был положительным.

Комментарии:

1. Ты не хочешь iframe , чтобы это было в form ?

2. Привет, приятель @Spectric, Это совершенно верно. Я хочу, чтобы они были созданы внутри div , но отдельно от form .

Ответ №1:

Воспользуйся:

 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");

Ответ №2:

Если вам нужен такой шаблон, как «тело > div >> форма >>> ввод». Кроме того, вы хотите добавить элемент iframe в качестве дочернего элемента div. Вы можете легко сделать это, используя метод appendChild() в javascript. В этом коде я делаю элемент iframe последним дочерним элементом div. Вы можете поместить элемент iframe перед любым дочерним элементом с помощью метода insertBefore ().

 // 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);
Метки: ,