Question

注意：我正在尝试学习如何使用javascript而不是jquery或其他库。

我是javascript的新手，我想了解它是如何工作的，并想知道是否有更有效的编码方式。

function myFunction() {
    var domObject = document.createElement("li"),
        userName = document.getElementById("userName").value,
        userNameText = document.createTextNode(userName);

    domObject.appendChild(userNameText);
    document.getElementById("myList").appendChild(domObject);
    document.getElementById("userName").value = "";
}

<body>
    <input type="text" id="userName">
    <button onclick="myFunction()">Click</button>
    <ul id="myList">
        <li>this is</li>
        <li>just a</li>
        <li>test to</li>
        <li>append children</li>
    </ul>
    <script src="main.js"></script>
</body>

Answer 1

domObject肯定不是变量的最佳名称（也不是myFunction）。无论如何，使用addEventListener而不是内联事件侦听器：

＆＃13;

// you can, of course, use getElementById with an ID attribute
var input = document.querySelector('input');
var button = document.querySelector('button');
var list = document.querySelector('ul');

button.addEventListener('click', function () {
  var li = document.createElement('li');
  li.textContent = input.value;
  input.value = '';
  list.appendChild(li);
});

＆＃13;

<input type="text">
<button>Add to list</button>
<ul></ul>

＆＃13;

有没有更好的方法来编码？（初学者）

1 个答案:

有没有更好的方法来编码？ （初学者）

1 个答案:

有没有更好的方法来编码？（初学者）