Javascript appendChild() не работает.

Я в недоумении, почему следующее не работает.

HTML:

    ...    
        <div class="col2">
            <h2>Your Groups</h2>
            <input type="submit" id="addnew" class="btn btn-primary" value="Create New Group"/> 
            <div id="parent">
                <!--new div here-->
            </div>
        </div> 
    ...

Javascript:

document.getElementById('addnew').onclick = function(){

    var parent = document.getElementById('parent'); 
    var newGroup = document.createElement("div"); 
    newGroup.setAttribute("id", "newGroup"); 
    newGroup.setAttribute("class", "inner");
    parent.appendChild(newGroup); 
};

Спасибо заранее за вашу помощь.


javascript appendchild
person Z. Wood    schedule 21.11.2015    source источник
comment
Под неработающим вы подразумеваете, что он не вставляется?   -  person EkcenierK    schedule 21.11.2015
comment
Прочтите Как задать хороший вопрос?   -  person Ortomala Lokni    schedule 21.11.2015
comment
Кажется, работает? jsfiddle.net/135r1rbq – если вы хотите, чтобы элемент div имел содержимое, используйте newGroup.textContent = "example";   -  person Leon Adler    schedule 21.11.2015

Ответы (2)


arrow_upward
3
arrow_downward

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

Во-первых, вы должны узнать об инструментах веб-разработчика в вашем браузере. Нажмите «F12» и найдите «родительский» div на вкладке «элементы» в появившемся окне. Как только вы найдете «родительский» элемент, нажмите на кнопку. Вы увидите, что ваш новый div появится под «родителем».

Однако он ничего не отображает, потому что у него нет содержимого. Просто сделайте

newGroup.textContent = "Hello, world!";

После создания элемента с помощью document.createElement у вас теперь будет контент в вашем дочернем элементе.

Кроме того, не устанавливайте идентификатор каждого дочернего элемента в одно и то же значение. Идентификаторы в HTML должны быть уникальными. Возможно, вам также следует рассмотреть возможность использования addEventListener вместо onclick в вашем коде.

person Community    schedule 21.11.2015

arrow_upward
0
arrow_downward

Что ты пытаешься сделать? Вы пытаетесь получить доступ к родительской и новой группе вне функции? Если это так, вам нужно объявить переменные вне функции.

var parent;
var newGroup;

document.getElementById('addnew').onclick = function(){

var parent = document.getElementById('parent'); 
var newGroup = document.createElement("div"); 
newGroup.setAttribute("id", "newGroup"); 
newGroup.setAttribute("class", "inner");
parent.appendChild(newGroup); 
};

Вы просто отображаете пустой div, поэтому, если вам интересно, почему вы ничего не видите, возможно, поэтому. Попробуйте добавить простую строку или стиль CSS, чтобы увидеть новый div. Вот пример: http://jsfiddle.net/inspiredtolive/Lrydh3ar/2/

person Marco Chan    schedule 21.11.2015