Tengo una lista vacía predefinida:
<ul id="tool_list"></ul>
Una función que crea botones (usé div para tener mayor control de estilo y funciona sin problemas):
function createButton(buttonId, buttonName) {
return `<div class='button' id=${buttonId}>${buttonName}</div>`;
}
Y una función que añade ítems con un diseño predefinido:
function addTool(label, labelId, editorData, buttons, resultAreaName) {
var i = 0;
var result = "";
var buttonlist = "";
while (i < buttons.length) {
newButton = createButton(buttons[i][0], buttons[i][1]);
buttonlist = buttonlist + newButton;
i++;
}
document.getElementById("tool_list").innerHTML = document.getElementById("tool_list").innerHTML + '<li><p id=' + labelId + '>' + label + '</p><div class="subspaces"><textarea id=' + editorData[0] + ' placeholder=' + editorData[1] + ' rows=' + editorData[2] + '></textarea><div class="buttonlist">' + buttonlist +'</div><p id=' + resultAreaName + '>Results will appear here.</p></div></li>';
}
Y este comando para agregar una cierta herramienta:
addTool("Invertir texto:", "reversetextmod", ["reversetext", "Type your text here.", 4], [["processReversingText", "Procesar"]], "resultReverseArea");
El problema es que al ejecutar mi comando, el placeholder de mi textarea
se corta a medias y en el código fuente me salen cosas como esta:
<li><p id="reversetextmod">Invertir texto:</p><div class="subspaces"><textarea id="reversetext" placeholder="Type" your="" text="" here.="" rows="4"></textarea><div class="buttonlist"><div class="button" id="processReversingText">Procesar</div></div><p id="resultReverseArea">Results will appear here.</p></div></li>```
Unos signos raros donde va el placeholder de mi textarea
. No he podido quitarlos. Desde ahí se trunca el funcionamiento y no me deja seguir de forma adecuada. ¿Alguien me puede ayudar?
NOTA: NO ES OPCIÓN USAR createElement, NO PUEDO PONERLE ID A LAS COSAS.