Добавить элемент списка через javascript

Итак, я пытаюсь распечатать массив, который получает текст ввода пользователя, добавленный в него, но то, что я хочу распечатать, - это упорядоченный список массива. Как вы можете видеть, (если вы запустите мой код) элемент списка просто продолжает добавлять пользовательский ввод, а новые имена не добавляются с именами людей. Пожалуйста помоги! Вот код ниже:Добавить элемент списка через javascript

<!DOCTYPE html> 
<html> 
<head> 
First name: <input type="text" id="firstname"><br> 

<script type="text/javascript"> 
var x= []; 

function changeText2(){ 
var firstname = document.getElementById('firstname').value; 
document.getElementById('boldStuff2').innerHTML = firstname; 
x.push(firstname); 
document.getElementById('demo').innerHTML = x; 
} 
</script> 

<p>Your first name is: <b id='boldStuff2'></b> </p> 
<p> Other people's names: </p> 

<ol> 
    <li id = "demo"> </li> 
</ol> 

<input type='button' onclick='changeText2()' value='Submit'/> 

</head> 
<body> 
</body> 
</html>

источник

2013-07-21 user2581598

'' содержит только мета-информацию и ссылки на ресурсы, а не фактическое содержание. Но причина, по которой вы не получаете новый элемент списка, заключается в том, что вы его не создаете. –

Если вы хотите создать li элемент для каждого входного/имени, то вы должны создать его с document.createElement^[MDN].

Дайте Перечислите ID:

<ol id="demo"></ol>

и получить ссылку на него:

var list = document.getElementById('demo');

В обработчике событий, создать новый элемент списка с входным значением, как содержание и добавлять в список с Node.appendChild^[MDN]:

var firstname = document.getElementById('firstname').value; 
var entry = document.createElement('li'); 
entry.appendChild(document.createTextNode(firstname)); 
list.appendChild(entry);

DEMO

источник

2013-07-21 15:46:02

попробовать что-то вроде этого:

var node=document.createElement("LI"); 
var textnode=document.createTextNode(firstname); 
node.appendChild(textnode); 
document.getElementById("demo").appendChild(node);

Fiddle: http://jsfiddle.net/FlameTrap/3jDZd/

источник

2013-07-21 15:46:14

Я недавно был представлен с той же проблемой, и наткнулся на эту тему, но нашел более простое решение с помощью Append ...

var firstname = $('#firstname').val(); 

$('ol').append('<li>' + firstname + '</li>');

Сохраните первое имя, а затем используйте append, чтобы добавить это значение как li в ol. Надеюсь, это поможет :)

источник

2016-10-06 19:02:48

Я этого не делал. Это проблема? Это буквально мой первый ответ на SO. Очень новичок в этом. Просто пытаюсь помочь. Спасибо за ваш вклад. –

@JesseNovotny Я ценю ваш ответ. Это помогло мне. – FewFlyBy

Этот ответ был полезен для меня, но было бы полезно (или передовая практика) добавить имя на submit, так как я закончил делать. Надеюсь, это будет полезно кому-то. CodePen Sample

<form id="formAddName"> 
     <fieldset> 
     <legend>Add Name </legend> 
      <label for="firstName">First Name</label> 
      <input type="text" id="firstName" name="firstName" /> 

     <button>Add</button> 
     </fieldset> 
    </form> 

     <ol id="demo"></ol> 

<script> 
    var list = document.getElementById('demo'); 
    var entry = document.getElementById('formAddName'); 
    entry.onsubmit = function(evt) { 
    evt.preventDefault(); 
    var firstName = document.getElementById('firstName').value; 
    var entry = document.createElement('li'); 
    entry.appendChild(document.createTextNode(firstName)); 
    list.appendChild(entry); 
    } 
</script>

источник

2018-01-14 18:31:05 inkpixelspaper

Добавить элемент списка через javascript

ответ

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