Insert item into html list, using javascript

Asked

Viewed 2,837 times

1

Hello, I’m wanting to insert an item(li), into an html list(ul) This item is an object, or property of an object. PS: I want a list to appear for example containing this data of the object I created

function produto(nome, tipo, preco, descricao){
    this.nome = nome;
    this.tipo = tipo;
    this.preco = preco;
    this.desc = descricao;

}

const myproduct = new produto("Biquini", "rendinha", 140, "ideal para praia")

const body = document.querySelector('body');
const list1 = document.querySelector('ul');
const item = document.createElement('li')
const escrever = innerHTML = "Meu produto: " + " " + myproduct.nome;
const nomeProduto = myproduct.nome;
body.appendChild(list1);
body.appendChild(item);
<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
</head>
<body>

	<p id="demo"></p>
	<div class="produtos">
		<ul>
			
		</ul>
		
	</div>
  
</body>
</html>

javascript list

2 answers

2

Workaround:

var options = [
        set0 = ["Produto: Biquini", "Tipo: rendinha", "Preço: 140", "Descrição: ideal para praia"]
    ];

function makeUL(array) {
    // Crie o elemento da lista:
    var list = document.createElement('ul');

    for(var i = 0; i < array.length; i++) {
        // Crie o item da lista:
        var item = document.createElement('li');

        // Defina seu conteúdo:
        item.appendChild(document.createTextNode(array[i]));

        // Adicione-o à lista:
        list.appendChild(item);
    }

    // Retorne a lista construída:
    return list;
}
// Adicione o conteúdo a div produtos:
document.getElementById('produtos').appendChild(makeUL(options[0]));
<div id="foo"></div>


<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
</head>
<body>

	<p id="demo"></p>
	<div id="produtos">
	</div>
  
</body>
</html>

0


function produto(nome, tipo, preco, descricao){
   this.nome = nome;
   this.tipo = tipo;
   this.preco = preco;
   this.desc = descricao;
}

//Chamar a função
const meuProduto = new produto("Biquini", "Rendinha", 140, "Ideal para praia");

//Pegar id da lista
const lista = document.getElementById('lista');

//Criar elemento para cada campo
const itemPro = document.createElement('li');
const itemTip = document.createElement('li');
const itemPre = document.createElement('li');
const itemDes = document.createElement('li');

//Atribuir valores para cada elemento
itemPro.innerHTML = "Produto: " + " " + meuProduto.nome;
itemTip.innerHTML = "Tipo: " + " " + meuProduto.tipo;
itemPre.innerHTML = "Preço: " + " " + meuProduto.preco;
itemDes.innerHTML = "Descrição: " + " " + meuProduto.desc;

//Adicionar cada elemento na lista ul
lista.appendChild(itemPro);
lista.appendChild(itemTip);
lista.appendChild(itemPre);
lista.appendChild(itemDes);
<!DOCTYPE html>
<html>
<head>
   <title>teste</title>
</head>
<body>
   <p id="demo"></p>
   <div class="produtos">
      <ul id="lista">
      </ul>
   </div>
</body>
</html>

  • Excellent!!! was exactly what I was thinking :D

Browser other questions tagged javascript list

You are not signed in. Login or sign up in order to post.