如何使用Javascript/Jquery添加子元素

How to add child element using Javascript/Jquery

本文关键字：添加 元素 Jquery 何使用 Javascript      更新时间：2023-09-26

我需要一个帮助。我需要在Javascript/Jquery中使用button click添加子元素。我在下面解释我的代码。

<div class="form-group" id="intro-box">
    <input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
    <input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;" onclick="addMore();">
    <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
  </div>
  <script>
    function addMore(){
      $('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname" placeholder="Label Name" value="">');
    }
  </script>

这里我需要，最初一个文本字段和+按钮。当用户点击第一个文本字段下面的加号(+)按钮时，一个新的文本字段将创建不同的id(i.e-introlabelname2)和一个加号，减号按钮将创建，第一个文本字段将保留减号按钮。假设用户单击第二个文本字段的减号按钮，该特定字段将被删除，并且加号按钮将保留在第一个文本字段中，依此类推。这是我的plunkr代码。

我想这应该有帮助

使用您要求的'+' '-'按钮进行编辑:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello</h1>
    <div class="form-group" id="intro-box">
        <input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control" id="introlabelname0" name="introlabelname" placeholder="Label Name" value="">
        <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(1);">
    </div>
    <script>
        function addMore(i) {
            $("#plus").remove();
            $('#intro-box').append('<div><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' +
            '<input type="button" onclick="removeThis(' + i + ');" class="btn btn-danger btn-sm" name="minus" id="minus' + i + '" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' +
            '<div> <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;" onclick="addMore(' + (i++) + ');"></div>');
        }
        function removeThis(j) {
            $("#introlabelname" + j).remove();
            $("#minus" + j).remove();
        }
    </script>
</body>
</html>

同样，使用.clone()。注意对HTML所做的更改，以添加一个div来标识要克隆的元素作为"模板"，并删除onclick

function init() {
  $(document).on('click', '.btn-success', function() {
    var clone = $('#template').clone();
    $('#intro-box').append(clone);
    clone.find('.btn-danger').show();
  });
  $(document).on('click', '.btn-danger', function() {
    $(this).parent().remove();
  });
}
$(init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="form-group" id="intro-box">
    <div id="template">
      <input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
      <input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;">
      <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
    </div>
  </div>
</body>

使用.ready()，在.ready()处理程序中定义addMore函数;用.click()代替属性事件处理程序onclick;附加click事件到#minus元素;在点击#plus、#minus两个元素时检查"[name=introlabelname]"元素的.length;在点击#minus按钮时，如果.length元素不大于1，则传递布尔结果给.toggle() #minus按钮;点击#minus元素，删除最后一个"[name=introlabelname]"元素;用class="form-control introlabelname"代替id="introlabelname" 

<!DOCTYPE html>
<html>
<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello</h1>
  <div class="form-group" id="intro-box">
    <input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">
    <input type="button" class="btn btn-success btn-sm" name="minus" id="plus" value="+" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;">
    <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;">
  </div>
  <script>
    // Code goes here
    $(function() {
      function toggle() {
        $("#minus").toggle($("[name=introlabelname]").length > 1);
      }
      function addMore() {
        $('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">');
        toggle()
      }
      function removeOne() {
        $("[name=introlabelname]").last().remove()
        toggle()
      }
      $("#plus").click(addMore);
      $("#minus").click(removeOne)
    })
  </script>
</body>
</html>

plnkr https://plnkr.co/edit/6ekAL50B6j76FUWcVVhU?p=preview

阅读http://www.w3schools.com/howto/howto_js_todolist.asp

现在您想要创建一个具有不同id的输入字段，您可以设置一个新变量来完成此操作。

例如:

一个脚本标签:

var n=1;

另一个脚本标签:

document.getElementByid("btn").addEventListener("click",add(),false);
function add(){
var id="identity"+n.toString();
//converts n to string and adds it to identity
document.getElementByTagName("div").innerHTML+="<input type='text' id='"+id+"'/>";
n++;
}

我没有测试这个代码。但是你可以试试类似的方法

相关文章：