js利用list 单击添加按钮添加新的输入框

在JavaScript中，你可以使用HTML、CSS和JavaScript结合来实现这样的功能。首先，你需要创建一个列表（ul或li元素），以及一个添加按钮。当用户点击添加按钮时，会动态地在列表中插入一个新的输入框。

这里是一个简单的例子：

HTML部分：

<ul id="inputList">
</ul>
<button onclick="addInput()">添加输入框</button>

JavaScript部分：

function addInput() {
  // 创建一个新的输入框元素
  var newInput = document.createElement('input');
  
  // 设置输入框的初始属性，比如type和placeholder
  newInput.type = 'text';
  newInput.placeholder = '请输入';

  // 将新输入框添加到列表末尾
  var list = document.getElementById('inputList');
  list.appendChild(newInput);
}

这个函数会在用户点击“添加输入框”按钮时，创建一个新的`<input>`元素，并将其添加到id为"inputList"的列表中。

相关问题

js单击添加按钮显示红色边框，点击清除按钮边框消失

在JavaScript中，你可以通过给按钮元素绑定`click`事件监听器来实现这个功能。这里是一个简单的示例：

<button id="add-btn" style="border: none;">添加</button>
<button id="clear-btn" style="border: none;">清除</button>

<style>
  .red-border {
    border: 1px solid red;
  }
</style>

<script>
  document.getElementById("add-btn").addEventListener("click", function() {
    this.classList.add("red-border");
  });

  document.getElementById("clear-btn").addEventListener("click", function() {
    this.classList.remove("red-border");
  });
</script>

当用户点击"添加"按钮时，会给按钮添加一个红色边框，因为我们在CSS中定义了一个`.red-border`样式，设置了红色边框。而点击"清除"按钮时，会移除`.red-border`类，从而恢复默认无边框的状态。

2.实现在页面中增加目录的功能。页面中有一个输入框和一个“添加”按钮，单击“添加”按钮，会将输入框中输入的内容添加到目录列表中，需要注意以下几点： (1) 添加完内容之后，清空输入框信息：(2) 添加的内容需要将前后空格去掉；(3) 不能添加空内容。

要在页面上实现目录功能，可以结合HTML、CSS以及一些轻量级的JavaScript库（如jQuery）。以下是基本步骤：

首先，在HTML结构中设置基础元素：

<input type="text" id="directory-input" placeholder="请输入目录项">
<button id="add-item-btn">添加</button>
<ul id="directory-list"></ul>

然后，编写对应的CSS样式，比如对输入框和按钮的样式进行美化：

#directory-input {
    width: 200px;
    margin-bottom: 10px;
}
#add-item-btn {
    padding: 5px 10px;
    background-color: #ccc;
    color: #fff;
    cursor: pointer;
}

接下来，使用JavaScript处理事件：

$(document).ready(function(){
    $('#add-item-btn').on('click', function(e){
        e.preventDefault(); // 阻止默认提交行为
        var inputVal = $('#directory-input').val().trim(); // 获取输入值并去除前后空格

        if(inputVal === '') { // 检查是否为空
            alert('目录项不能为空!');
        } else {
            $('#directory-list').append('<li>' + inputVal + '</li>'); // 将内容添加到列表
            $('#directory-input').val(''); // 清空输入框
        }
    });
});

在这个示例中，当用户点击“添加”按钮时，首先获取输入框中的内容并去除前后空格。如果内容为空，则提示用户；否则，将内容添加到目录列表中并清空输入框。