Question

这是我的代码，我想获得myText的价值。我尝试使用appendChild，但它不起作用。点击按钮后如何获得myText值？

<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">
    function myFunc() {
      var = document.getElementById("myText").value;
      document.getElementById("myList").appendChild();
    }
  </script>
</div>`

Answer 1

var之后应该有一个标识符，在=之前标识变量。

使用<li>创建document.createElement()元素，将.textContent设置为上一行的变量标识符。

将已创建的li元素传递给.appendChild()。

＆＃13;

favorite
<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
  <script type="text/javascript">
    function myFunc() {
      var text = document.getElementById("myText").value;
      var li = document.createElement("li");
      li.textContent = text;
      document.getElementById("myList").appendChild(li);
    }
  </script>
</div>`

＆＃13;

Answer 2

对于纯文本节点，您可以使用document.createTextNode(text)创建一个并直接使用它。然而，您仍然需要list元素的节点，然后您可以将其附加到无序列表节点。

＆＃13;

function myFunc() {
    var text = document.getElementById("myText").value,
        li = document.createElement('li');
      
    li.appendChild(document.createTextNode(text));
    document.getElementById("myList").appendChild(li);
}

＆＃13;

<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
    <li>Coffe</li>
    <li>Tea</li>
  </ul>
</div>

＆＃13;

Answer 3

您需要将输入值存储到变量中。

然后，您需要创建一个新的List Item DOM节点，您可以从变量中设置值。

最后，您需要将新创建的列表项Node添加到列表Node。

＆＃13;

<div class="tut">
  <input type="text" name="" id="myText" style="padding: 2px; font-size: 18px; outline: none;">
  <input type="submit" name="" id="myBtn" onclick="myFunc()" style="padding: 2px; font-size: 18px;">
  <ul id="myList">
      <li>Coffe</li>
      <li>Tea</li>
  </ul>
  <script type="text/javascript">
      function myFunc() {
        var value = document.getElementById("myText").value;
        var newItem = document.createElement('li');
        newItem.appendChild(document.createTextNode(value));
        
        var list = document.getElementById("myList");
        list.appendChild(newItem);
      }
  </script>
</div>`

＆＃13;

Answer 4

尝试将您的功能更新为：

function myFunc() {
  var myText= document.getElementById("myText").value;
  document.getElementById("myList").innerHTML+="<li>"+myText+"</li>";
}

按钮单击时检索值

4 个答案: