Создайте div для дочернего элемента div в javascript (DOM)

У меня возникла проблема, когда div был дочерним элементом другого div. Я хотел бы узнать, как это сделать в javascript.Создайте div для дочернего элемента div в javascript (DOM)

Я хотел бы, чтобы по существу создать это:

<body> 
<div id = "graph"> 
    <div id "data"> 
    </div> 
</div> 
</body>

С помощью JavaScript. Конечной целью является создание многих из них снова и снова.

Вот код, который я до сих пор:

var graph = document.createElement('div'); 
graph.id = "graph"; 
document.body.appendChild(graph); 

var barWrapper = document.createElement('div'); 
barWrapper.id = "data";

Вышеприведенные работает без ошибок. Когда я добавляю:

document.getElementbyId("graph").appendChild("data");

Я получаю сообщение об ошибке «Невыпущенный тип: неопределенный не является функцией».

Из моих исследований это, кажется, предложение каждого. Кроме того, функция appendChild кажется мне полной. Что мне не хватает? Заранее спасибо!!

источник

2014-09-04 JSolano

'getElementbyId' - опечатка в пост? Сообщение об ошибке сообщает, что эта опечатка, скорее всего, также находится в реальном коде. – Teemu

'getElementbyId' ->' getElementById'. Кроме того, что случилось с этой строкой? '.appendChild ("данные")'. –

Вы можете использовать новый метод под названием «отладка», чтобы отслеживать такие проблемы. Например, скопируйте строку 'document.getElementbyId' из вашего кода и вставьте ее в консоль devtools. Когда вы видите «TypeError», спросите себя, какая вещь, которая должна быть функцией, по-видимому, нет? Первым кандидатом является 'document.getElementbyId', поэтому просто вставьте его в консоль самостоятельно, и вы увидите, что он не определен. Как это могло быть? Посмотрите на это очень близко или скопируйте его точно так же, как и вставьте в Google, и вы увидите, что это опечатка для 'getElementById'. Сообщения об ошибках имеют значение – 2014-09-04 17:29:02

Ваша проблема (которая вызывает у вас тип ошибки) является вы пытаетесь добавить строку, а не ссылка на сам дочерний элемент.

var parent = document.createElement("div"); 
parent.id = "graph"; 
var child = document.createElement("div"); 
child.id = "data"; 
parent.appendChild(child);

источник

2014-09-04 17:26:10 Xaxis

Вы должны добавить объект так же, как и с телом.

var parent = document.getElementById("graph"); 
parent.appendChild(barWrapper);

Edit:

Вы также не нужно называть getElementById здесь. Вы должны иметь возможность присоединить дочернего элемента к родительскому объекту, а затем добавить родителя к телу. Как это:

var graph = document.createElement('div'); 
graph.id = "graph"; 

var barWrapper = document.createElement('div'); 
barWrapper.id = "data"; 

graph.appendChild(barWrapper); 
document.body.appendChild(graph);

источник

2014-09-04 17:21:07

Вы пропустили определение опечатки. – 2014-09-04 17:24:17

@torazaburo Проблема была не только опечаткой. Кроме того, пользователь пытался добавить строку «данные» к элементу графа, в отличие от созданного им дочернего элемента. – Brian

Ошибка beign вызванной опечатка, должно быть getElementById

document.getElementbyId("graph") 
>TypeError: undefined is not a function

когда вы исправить и выполнить код, который вы получите

document.getElementById("graph").appendChild("data") 
>NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

это потому, что вы пытаясь добавить строку, а не фактический узел html.вам нужно будет захватить элемент первой, а

document.getElementById("graph").appendChild(document.getElementById("data"));

Поскольку у вас уже есть ссылки на оба этих объектов уборщик решение будет

grap.appendChild(barWrapper);

источник

2014-09-04 17:29:15

Есть несколько проблем

document.getElementbyId("graph") должно быть document.getElementById("graph")
.appendChild("data") должно быть .appendChild(bargraph)

Этот JS работы:

var graph = document.createElement('div'); 
graph.id = "graph"; 
document.body.appendChild(graph); 

var barWrapper = document.createElement('div'); 
barWrapper.id = "data"; 
document.getElementById("graph").appendChild(barWrapper);

скрипку здесь: http://jsfiddle.net/hatvjete/

источник

2014-09-04 17:30:10 dave

Создайте div для дочернего элемента div в javascript (DOM)

ответ

Смежные вопросы