createElement添加內容 - 復制案例 · 前端開發

createElement添加內容 - 復雜案例： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://creative.chat/resources/js/jquery-3.5.1.js"></script> </head> <body> <button class="add">添加</button> <div id="contentText"></div> <script> // 方法1 $('.add').click(function() { $("#contentText").append(createTextItem()); }); function createTextItem() { var html = ''; html += '<div class="col-lg-3">'; html += '<div class="form-group mb-4">'; html += '<label for="billing-name">方法1</label>'; html += '<input type="text" class="form-control" id="text1" name="data[text1]" placeholder="" value="">'; html += '</div>'; html += '</div>'; return html; } // 方法2 $('.add').click(function() { var div=document.createElement('div'); div.className = 'col-lg-3'; var html = ''; html += '<div class="form-group mb-4">'; html += '<label for="billing-name">方法2</label>'; html += '<input type="text" class="form-control" id="text1" name="data[text1]" placeholder="" value="">'; html += '</div>'; div.innerHTML= html; $("#contentText").append(div); }); </script> </body> </html> ```