Ich möchte eine Funktion erstellen, um programmgesteuert einige Elemente auf einer Seite hinzuzufügen.

Nehmen wir an, ich möchte eine Dropdown-Liste mit vier Optionen hinzufügen:

<select name="drop1" id="Select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Wie kann ich das machen?

Dies funktioniert (reines JS, an ein div von id angehängt myDiv):

Demo: http://jsfiddle.net/4pwvg/

var myParent = document.body;

//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
}

var sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';

var cars = [
  "volvo",
  "saab",
  "mercedes",
  "audi"
];

var options_str = "";

cars.forEach( function(car) {
  options_str += '<option value="' + car + '">' + car + '</option>';
});

sel.innerHTML = options_str;


window.onload = function() {
  document.body.appendChild(sel);
};

Ich habe schnell eine Funktion erstellt, die dies erreichen kann. Es ist möglicherweise nicht der beste Weg, dies zu tun, aber es funktioniert einfach und sollte browserübergreifend sein. Bitte wissen Sie auch, dass ich KEIN Experte für JavaScript bin, daher sind alle Tipps großartig :)

Reine Javascript-Lösung zum Erstellen von Elementen

function createElement(){
    var element  = document.createElement(arguments[0]),
        text     = arguments[1],
        attr     = arguments[2],
        append   = arguments[3],
        appendTo = arguments[4];

    for(var key = 0; key < Object.keys(attr).length ; key++){
        var name = Object.keys(attr)[key],
             value = attr[name],
             tempAttr = document.createAttribute(name);
             tempAttr.value = value;
        element.setAttributeNode(tempAttr)
    }
    
    if(append){
        for(var _key = 0; _key < append.length; _key++) {
            element.appendChild(append[_key]);
        }
    }

    if(text) element.appendChild(document.createTextNode(text));

    if(appendTo){
        var target = appendTo === 'body' ? document.body : document.getElementById(appendTo);
        target.appendChild(element)
    }       

    return element;
}

Mal sehen, wie wir das machen

<select name="drop1" id="Select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

So funktioniert das

    var options = [
        createElement('option', 'Volvo', {value: 'volvo'}),
        createElement('option', 'Saab', {value: 'saab'}),
        createElement('option', 'Mercedes', {value: 'mercedes'}),
        createElement('option', 'Audi', {value: 'audi'})
    ];


    createElement('select', null, // 'select' = name of element to create, null = no text to insert
        {id: 'Select1', name: 'drop1'}, // Attributes to attach
        [options[0], options[1], options[2], options[3]], // append all 4 elements
        'body' // append final element to body - this also takes a element by id without the #
    );

Das sind die Parameter

createElement('tagName', 'Text to Insert', {any: 'attribute', here: 'like', id: 'mainContainer'}, [elements, to, append, to, this, element], 'body || container = where to append this element');

Diese Funktion ist geeignet, wenn Sie viele Elemente anhängen müssen. Wenn es eine Möglichkeit gibt, diese Antwort zu verbessern, lassen Sie es mich bitte wissen.

bearbeiten:

Hier ist eine funktionierende Demo

JSFiddle Demo

Dies kann sehr individuell an Ihr Projekt angepasst werden!

Dieser Code würde dynamisch eine Auswahlliste erstellen. Zuerst erstelle ich ein Array mit den Autonamen. Zweitens erstelle ich ein Auswahlelement dynamisch und ordne es einer Variablen "sEle" zu und hänge es an den Hauptteil des HTML-Dokuments an. Dann benutze ich eine for-Schleife, um das Array zu durchlaufen. Drittens erstelle ich das Optionselement dynamisch und ordne es einer Variablen "oEle" zu. Mit einer if-Anweisung ordne ich dem ersten Optionselement [0] die Attribute 'disabled' und 'selected' zu, damit es immer ausgewählt wird und deaktiviert ist. Ich erstelle dann ein Textknoten-Array "oTxt", um die Array-Namen anzuhängen, und füge dann den Textknoten an das Optionselement an, das später an das Auswahlelement angehängt wird.

var array = ['Select Car', 'Volvo', 'Saab', 'Mervedes', 'Audi'];

var sEle = document.createElement('select');
document.getElementsByTagName('body')[0].appendChild(sEle);

for (var i = 0; i < array.length; ++i) {
  var oEle = document.createElement('option');

  if (i == 0) {
    oEle.setAttribute('disabled', 'disabled');
    oEle.setAttribute('selected', 'selected');
  } // end of if loop

  var oTxt = document.createTextNode(array[i]);
  oEle.appendChild(oTxt);

  document.getElementsByTagName('select')[0].appendChild(oEle);
} // end of for loop

Hier ist eine ES6-Version der Antwort von 7stud .

const sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';

const cars = [
  "Volvo",
  "Saab",
  "Mercedes",
  "Audi",
];

const options = cars.map(car => {
  const value = car.toLowerCase();
  return `<option value="${value}">${car}</option>`;
});

sel.innerHTML = options;

window.onload = () => document.body.appendChild(sel);

const countryResolver = (data = [{}]) => {
    const countrySelecter = document.createElement('select');
    countrySelecter.className = `custom-select`;
    countrySelecter.id = `countrySelect`;
    countrySelecter.setAttribute("aria-label", "Example select with button addon");

    let opt = document.createElement("option");
    opt.text = "Select language";
    opt.disabled = true;
    countrySelecter.add(opt, null);
    let i = 0;
    for (let item of data) {
        let opt = document.createElement("option");
        opt.value = item.Id;
        opt.text = `${i++}. ${item.Id} - ${item.Value}(${item.Comment})`;
        countrySelecter.add(opt, null);
    }
    return countrySelecter;
};

Hier ist eine ES6-Version. Die Konvertierung in Vanilla JS sollte nicht zu schwierig sein, aber ich habe sowieso bereits jQuery:

function select(options, selected) {
  return Object.entries(options).reduce((r, [k, v]) => r.append($('<option>').val(k).text(v)), $('<select>')).val(selected);
}
$('body').append(select({'option1': 'label 1', 'option2': 'label 2'}, 'option2'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Es ist sehr einfach, aber knifflig, aber hier ist, was Sie wollten. Ich hoffe, es ist hilfreich: Diese Funktion generiert eine Auswahlliste von 1990 bis 2018. Ich denke, dieses Beispiel kann Ihnen helfen, wenn Sie einen anderen Wert hinzufügen möchten, ändern Sie einfach den Wert von x und y. )

function dropDown(){
    var start = 1990;
    var today = 2019;
    document.write("<select>");
    for (var i = start ; i <= today; i++)
    document.write("<option>" + i + "</option>");
}
document.write("</select>");

dropDown();