Динамическое создание кнопок бутстрапа

Question

Можно ли динамически создать кнопку загрузки? У меня есть текстовый файл, который имеет список элементов, где я буду использовать javascript для создания массива. Именно здесь я хотел бы динамически создавать кнопки бутстрапа, причем те элементы являются текстом внутри каждой кнопки. Если в текстовом файле 10 элементов, будет создано 10 кнопок. Может кто-то сказать мне, как это можно сделать или указать мне на какой-то учебник об этом.

EDIT (создание возможно сейчас, но не код для проверки, если создается кнопки):

createButtons():

$(function() { 
    $.ajax({ 
    url : 'http://localhost:8080/SSAD/type.txt', 
    dataType : "text", 
    success : function (filecontent) { 
     var lines=filecontent.split('\n'); 
     $.each(lines, function() { 
     if (this!='') { 
      var word = this; 
      word = word.toLowerCase().replace(/(?:_| |\b)(\w)/g, function(str, p1) { return p1.toUpperCase();}); 
      if ($('button:contains("'+word+'")').length==0) { 
       var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of'+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>'; 
       $(".crisisButtons").append(button); 
      } 
     } 
     }); 
    } 
    }); 
}); 

HTML:

<button type="button" class="btn btn-block btn-inverse" onclick="createButtons">Click me!</button> 

<div class="crisisButtons"></div> 

Answer 1

Да. Это очень просто.

textfile.txt

button1 
button2 
button3 
button4 
button5 
button6 
button7 
button8 
button9 
button10 

код

<div id="textfile-buttons"></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $.ajax({ 
    url : 'textfile.txt', 
    dataType : "text", 
    success : function (filecontent) { 
     var lines=filecontent.split('\n'); 
     $.each(lines, function() { 
     if (this!='') { 
      var button='<button class="btn btn-primary">'+this+'</button>&nbsp;'; 
      $("#textfile-buttons").append(button); 
     } 
     }); 
    } 
    }); 
}); 
</script> 

Результат

Конечно, вы должны назначить click -handler кнопкам или ссылку, если вы используете <a> -tags вместо <button>.

---

Update

Если вы хотите, чтобы проверить, является ли button с определенным текстом уже существует, измените $.each цикл

$.each(lines, function() { 
    if (this!='') { 
    //check if a button with "this" text not already exists 
    if ($('button:contains("'+this+'")').length==0) { 
     var button='<button class="btn btn-primary">'+this+'</button>&nbsp;'; 
     $("#textfile-buttons").append(button); 
    } 
    } 
}); 

Таким образом, даже если textfile.txt содержит button1 кнопка2 кнопка3 кнопка3 кнопка3 Button3 Button7 Button8 Button9 Button10

будет создан только один Button3.