Question

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1>Playlist</h1>
  <form>
    <input type="text" id="songInput" placeholder="Enter a song">
    <input type="button" id="songButton" value="Add to Playlist">
  </form>

  <ul id="playlist">
  </ul>
</body>
</html>

上面的html链接到以下javascript：

window.onload = init;

function init(){
  var button=document.getElementById("songButton");
  button.onclick=handleSongButtonClick;
}

function handleSongButtonClick(){
  var input = document.getElementById("songInput");
  var songName = songInput.value;
  var ul = document.getElementById("playlist");
  var li = document.createElement("li");
  li.value=songName;
  ul.appendChild(li);
}

当我输入一首歌时，它给出的是一个子弹而没有文字值的问题是什么？请在http://jsbin.com/EROcOGo/2/edit

找到帮助

Answer 1

您可以使用innerText

function handleSongButtonClick(){
  var input = document.getElementById("songInput");
  var songName = input.value;
  var ul = document.getElementById("playlist");
  var li = document.createElement("li");
  li.innerText=songName; // Change here
  ul.appendChild(li);
}

Modified jsBin

Answer 2

.value属性通常仅适用于<form>相关元素 - <input>，<textarea>等。

li.value = songName; // has no affect

要在其他元素中设置文本内容，您可以：

设置.textContent（标准）和.innerText（IE）：
```
li.textContent = li.innerText = songName;
```

Create和append文本节点。

li.appendChild(document.createTextNode(songName));

Answer 3

使用input.value代替songInput.value;

li.innerText=songName;

而不是

li.value=songName;

Answer 4

在这里：http://jsbin.com/UzeZasa/3/edit?html,js,output

未声明第一个songInput（仅命名为input。第二：value不是li的属性。您必须使用element.innerHTML = content设置该标记的内部html。

JavaScript不包含列表项中的值

4 个答案: