не работает функция добавления элементов

Question

 function test(name){
 var x =document.createTextNode('name');
 var div =document.createElement('div');
 var column = document.getElementsByClassName('column')[0];
 div.className='example';
 div.appendChild(x);
 column.appendChild(div);

 }
 test('abc');

 <ul class="columnList">
 <li class="column red">
 <div class="example">name2</div>
</li>

Answer 1

Все работает. Видимо Вы запускаете скрипт перед загрузкой DOM. Добавьте <script> в конец, перед </body>, либо добавьте следующее:

document.addEventListener("DOMContentLoaded", function() {
    // ...
});

function test(name) {
  var x = document.createTextNode('name');
  var div = document.createElement('div');
  var column = document.getElementsByClassName('column')[0];
  div.className = 'example';
  div.appendChild(x);
  column.appendChild(div);
}

test('abc');

<ul class="columnList">
  <li class="column red">
    <div class="example">name2</div>
  </li>
</ul>

Answer 2

Я думаю, что под словом "не работает", вы понимаете то, что вместо текста abc, вы видите всегда name. Проблема в том, что в текстовый узел вы вставляете не аргумент функции name, а строку "name".

function test(name){
  var x =document.createTextNode(name);
  var div =document.createElement('div');
  var column = document.getElementsByClassName('column')[0];
  div.className='example';
  div.appendChild(x);
  column.appendChild(div);
}
test('wow');
test('say again');

 <ul class="columnList">
   <li class="column red">
     <div class="example">name2</div>
   </li>
</ul>

БЛОГ НА HUSL

не работает функция добавления элементов

Ответы (2 шт):