Append List of Elements Asked Dec 28 '17 at 13:55 Active Dec 28 '17 at 16:59 Viewed 184 times 1 I am trying to create a button that calls a function which creates new list items with selection boxes. The code below create a select element however, the button disappears and it doesn't create one list item after another. Any idea how I can persist the button and add one select element after another? <button type="button" onclick="createTable()">Add Item</button> function createTable() { var itemName = "Selections: "; document.write(itemName); for (var i=0;i<7;i++) { var myTable = " "; myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>"; myTable+="<option value='zeroPoint'>0</option>"; myTable+="<option value='halfPoint'>1/2</option>"; myTable+="<option value='onePoint'>1</option>"; myTable+="</select>"; document.write(myTable); } } javascript edited Dec 28 '17 at 13:58 Andy G 18,518 5 42 63 asked Dec 28 '17 at 13:55 kieran_mol 111 1 12 4 The first thing to do is to remove the reliance on the use of `document.write`. `document.write` and persistence are a contradiction. – Andy G Dec 28 '17 at 13:57 1 Instead use something like: [`Node.appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), [`Node.insertBefore()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) and so forth. – David says reinstate Monica Dec 28 '17 at 13:59 1 I would suggest you to use element.append(element) instead of document.write(). Create a root element to which you want to append all your select list and append each select list to that root element. I hope it helps. – Ajay Dec 28 '17 at 14:05 4 Answers4 2 I made some changes to the documnet.write way you have. However, I would strongly recommend dynamically creating html dom nodes. I added another method, createTable2, which does the required. It will also be easier for you to preserve the html content you have, which can be easily written over with document.write way. Edit: I added one more method, createTable2, to allow adding multiple selects. There is a model you can pass in with the select and option information you have. There is a flag, empty, which is set to true if you would like to empty the div before adding new selects; i.e. createTable3(true). function createTable() { var itemName = "Selections: "; var selectElement = document.getElementById("render"); for (var i=0;i<7;i++) { var myTable = " "; myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>"; myTable+="<option value='zeroPoint'>0</option>"; myTable+="<option value='halfPoint'>1/2</option>"; myTable+="<option value='onePoint'>1</option>"; myTable+="</select>"; selectElement.innerHTML = myTable; } } function createTable2(){ var myDiv = document.getElementById("render"); //Create array of options to be added var array = ["zeroPoint","halfPoint","onePoint"]; var texts = ["1","1/2","1"]; var selectList = document.createElement("select"); selectList.id = "mySelect"; selectList.style.fontSize = "10px"; selectList.onChange = 'Calculate()'; myDiv.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 = texts[i]; selectList.appendChild(option); } } function createTable3(empty){ var myDiv = document.getElementById("render"); if(empty){ myDiv.innerHTML = ""; } let model = { "select1": [{value: "zeroPoint", label: "1"}, {value: "halfPoint", label: "1/2"}, {value: "onePoint", label: "1"}], "select2": [{value: "zeroPoint1", label: "11"}, {value: "halfPoint1", label: "11/22"}, {value: "onePoint1", label: "11"}] }; Object.keys(model).forEach(function(key){ let entry = model[key]; var selectList = document.createElement("select"); selectList.id = key; selectList.style.fontSize = "10px"; myDiv.appendChild(selectList); //Create and append the options for (var i = 0, item; item = entry[i]; i++) { var option = document.createElement("option"); option.value = item.value; option.text = item.label; selectList.appendChild(option); } }); } <button type="button" onclick="createTable3()">Add Item</button> <div id= "render"/> edited Dec 28 '17 at 15:18 orabis answered Dec 28 '17 at 14:14 orabis 2,110 2 9 22 Hi @orabis, thanks for this! but how do I modify this so that several select element with options are displayed after I click the button? I have added a 'for' loop wrapped around where the 'selectList' variable is declared however, this only shows select elements and not the options underneath (i.e. "0", "0.5", "1"). Thanks, – kieran_mol Dec 28 '17 at 14:45 You mean to add multiple selects rather than s single one per click? – orabis Dec 28 '17 at 14:57 If so, I added one more method do that. Let me know if does the required. – orabis Dec 28 '17 at 15:19 0 If you use document.write("") the entire web page content will be replace by the content you pass inside the document.write function. Instead create a div element under button element like <div id="list"></div> then in the javascript file change as function createTable() { var itemName = "Selections: "; var selectElement = document.getElementById(list); for (var i=0;i<7;i++) { var myTable = " "; myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>"; myTable+="<option value='zeroPoint'>0</option>"; myTable+="<option value='halfPoint'>1/2</option>"; myTable+="<option value='onePoint'>1</option>"; myTable+="</select>"; selectElement.innerHTML = myTable; } } answered Dec 28 '17 at 14:04 Vijay 124 8 String concatenation to construct DOM is just bad, we have DOM apis for good reasons. This would have been fine if you are echo'ing HTML with PHP, but if you are using javascript this looks and is a hack. – realappie Dec 28 '17 at 14:09 My answer was merely to help OP solve his problem. OP had used string concatenation to construct the HTML and I've extended upon it. I don't see how this warrants a downvote. – Vijay Dec 28 '17 at 14:13 please see the following [thread](https://stackoverflow.com/questions/11515383/why-is-element-innerhtml-bad-code) – realappie Dec 28 '17 at 14:26 The fact you want to help OP with his problem is great! But the way he is approaching the problem is bad for reasons outlined [here](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) And your `.innerHTML` suffers from similar issues too and is considered a bad practice (Regardless of the fact it probably does what OP wants) I personally appreciate anyone's effort in helping people, but I can't see a bad practice get suggested as a solution to a problem and not do anything about it. – realappie Dec 28 '17 at 14:32 0 I am unsure what you are exactly trying to achieve, but having DOM elements in strings and then modifying an elements innerHTML or using document.write is just a hack. You need to leverage the DOM apis. While that means my code is maybe double or triple the the size of your code. Its the more maintainable version long term. function createTable() { var selectMenu = document.querySelector('#selectionsContainer'); // Array of options elements var myTable = []; // Pushing some elements to our my table array // myTable.push( createOption('zeroPoint', 0), createOption('halfPoint', 0.5), createOption('onePoint', 1) ) // Looping through all elements and adding them to the //selections container // myTable.forEach( element => { selectionsContainer.appendChild(element); }); } /** Creates an option element and returns it for usage */ function createOption(value, label) { var option = document.createElement('option'); option.value = value; option.innerText = label; return option; } function Calculate(value) { console.log('do whatever you want to with the value: ', value); } select { font-size:10px } <button type="button" onclick="createTable()">Add Item</button> <label for="selectionsContainer"> Selections <label> <select id="selectionsContainer" onchange='Calculate(this.value)'> <option value=5> 5 </option> <select> answered Dec 28 '17 at 14:26 realappie 3,453 2 22 36 Yes, this is the solution I would also go with. But I'm confused now, did he wanted to add more tag or to create new :) – Nikola Mitic Dec 28 '17 at 17:02

Answer 1

All the answers so far are pointing that OP might be doing something wrong by not creating select dynamically. But we don't know his requirements.

Also everybody already explained document.write will write on you entire document thus deleting everything, you don't want that.

document.write --> https://developer.mozilla.org/en-US/docs/Web/API/Document/write

appendChild should be used but you wanted a string and appendChild expect Node not string.

appendChild --> https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

node --> https://developer.mozilla.org/en-US/docs/Web/API/Node

So the only way to solve this is by using innerHTML and summing up inner Html by adding new ones.

Or by creating node from sting, which requires some more logic, see here --> Creating a new DOM element from an HTML string using built-in DOM methods or prototype

innerHTML --> https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

const selectTamplate = (selectId, onChangeCallbackName) => {
  return `
    <select name='test' id='mySelect${selectId}' style='font-size:10px' onchange='${onChangeCallbackName}()'>
     <option value='zeroPoint'>0</option>
     <option value='halfPoint'>1/2</option>
     <option value='onePoint'>1</option>
    </select> 
  `
};

const appendStringHtml = (elementTargetHtml, elemenAppend) => {
  elemenAppend.innerHTML += elementTargetHtml;
}

const doSomethingOnChange = () => {
  console.log('I am the KING!');
};

const placeToAppend = document.querySelector('.append-selects-here');
const buttonAppender = document.querySelector('.btn-append');
let selectID = 1;

buttonAppender.addEventListener('click', ()=>{
  const selectHTML = selectTamplate(selectID, 'doSomethingOnChange');
  appendStringHtml(selectHTML, placeToAppend);
  selectID ++;
});

<button class="btn-append">Add Selects</button>
<div class="append-selects-here"></div>

see the working code here --> https://codepen.io/nikolamitic/pen/PEpEbj

I used template string so that interpolation is possible, little bit more clear. And separate the logic while still keeping yours.