按钮点击检索值

这是我的代码，我想要得到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>`

来源

2017-04-22 Jack Hawk

在开始的时候，我会建议您键入在谷歌查询。阅读有关元素，节点对象的文档。您的参与和Google的帮助可能会解决此类问题。 –

@JackHawk请参阅http://stackoverflow.com/help/someone-answers – guest271314

@投票“关闭”投票的用户，目前问题如何“离题”为stackoverflow.com？ – guest271314

应该有以下var的标识符，=之前识别该变量。

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

通过创建li元素到.appendChild()。

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>`

来源

2017-04-22 15:20:46 guest271314

非常感谢。 –

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

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

<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>

来源

2017-04-22 15:25:50

想知道是否li.appendChild（document.createTextNode（text））;比li.textContent = text;创建li元素之后？后者会不会更有效率？ –

我正在使用更多以节点为中心的视图到DOM，实际上我还没有测试，哪个工作更快。 –

您需要输入的值存储到一个变量。

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

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

<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>`

来源

2017-04-22 15:25:56

尝试更新功能，以这样的：

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

来源

2017-04-22 16:45:24

按钮点击检索值

回答

相关问题