I'm trying to render HTML DOM objects with Javascript depending on the type but I'm a bit lost

1
let items = [
    {
        name: "Luis",
        price: 15
    },
    {
        name: "Amore",
        price: 100
    }
];


var elDiv = {
    name: 'div'
}
var elUl = {
    name: 'ul'
}
var elLi = {
    name: 'li'
}

var elP = {
    name: 'p'
}

function domFunctor(opciones, innerhtml){
    let dom = document.createElement(this.name);
    dom.className = opciones.className ? opciones.className : "";
    if (innerhtml.length) {
        innerhtml.map(item => dom.appendChild(item));
    }else{
        if (innerhtml.nodeType != Node.ELEMENT_NODE) {
            dom.innerHTML = innerhtml;
        }else{
            dom.appendChild(dom.innerHTML);
        }
    }

    return dom;
}
var div = domFunctor.bind(elDiv);
var ul = domFunctor.bind(elUl);
var li = domFunctor.bind(elLi);
var p = domFunctor.bind(elP);


function renderList(renderItem,items)
{
    return div(
        { className: 'list-container'},
        items.length
        ? ul('',items.map(renderItem))
        : p('','No items found')
    );
}
function formatCurrency(params) {
    return params;
}

const renderPriceItem = item => li('',formatCurrency(item.price));
const renderCustomerItem = item => li('',item.name);
renderPriceList = renderList.bind(null, renderPriceItem);
// renderCustomerItem = renderList.bind(null, renderCustomerItem);
(function () {
    let salida = renderPriceList(items);
    document.getElementById('container').innerHTML = salida;
})();

Returns error, and I do not know how to solve it, I know I could use other libraries and the joke is to do it with vanilla. Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Here is the example of how it should look as ordered by the function renderList

    <div class="list-container">
     <!-- DEPENDE SI LA LISTA TIENE DATOS: -->
      <ul>
        <!-- Depende del Tipo de Dato que se esté mostrando -->
         <li> dato 1</li>
         <li> dato 2</li>
         ...
         <li> dato n</li>
      </ul>
      <!-- Si la lista no tiene datos -->
      <p>No items found</p>
    </div>

Important Note: I know it can be done very easily, otherwise, I need the DOM Objects to be created dynamically, and they can also be nested: For example: div ({className: "container"}, div ({className: "green background"}, ul ("", ...)));

if they know of any other method without using external libraries like Jquery, etc. I appreciate so much.

The Purpose of this exercise is purely educational.

    
asked by Luis Delfin 15.02.2018 в 04:21
source

0 answers