-1

Queria saber como faço para que ao em vez de aparecer aquela frase apareca o ul ao clicar no botão, o que eu devo usar no createTextNode para isso acontecer.

function mais() {
  var x = document.createElement("li");
  var t = document.createTextNode("This is a paragraph.");
  x.appendChild(t);
  document.body.appendChild(x);
}
<div class="emcima">
  
<div class='A'>
    <h1>Tarefas</h1>
    <button type="button" onclick="mais()" class="btn-mais" >Adicionar</button>
</div>
    <div class='espaco'>
    <ul class="tarefas">
      
      <li class="tarefa">
        
        <header>
          <input type="text" class="titulo" placeholder="Título">
          <button type="button" onclick="enable()" class="btn-escrever">✒️</button>
          <button type="button" class="btn-apagar">✂️</button>
        </header>
        <textarea name="" placeholder="Texto da tarefa" class='texto'></textarea>
      </li>
    </ul>
    </div>
</div>

2 Respostas 2

0

falta criar o ul

O appendChild acrescenta ao elemento selecionado o que for declarado na sequência entre parênteses. No caso você havia criado um elemento li e colocou no corpo do html. No entanto, geralmente o li vem dentro de um elemento ul. Então era preciso criar o elemento ul e inserir o li dentro dele como pode ver abaixo.

function mais() {
  var x = document.createElement("ul");
  var y = document.createElement("li");
  var t = document.createTextNode("This is a paragraph.");
  x.appendChild(y);
  y.appendChild(t);
  document.body.appendChild(x);
}
<div class="emcima">
  
<div class='A'>
    <h1>Tarefas</h1>
    <button type="button" onclick="mais()" class="btn-mais" >Adicionar</button>
</div>
    <div class='espaco'>
    <ul class="tarefas">
      
      <li class="tarefa">
        
        <header>
          <input type="text" class="titulo" placeholder="Título">
          <button type="button" onclick="enable()" class="btn-escrever">✒️</button>
          <button type="button" class="btn-apagar">✂️</button>
        </header>
        <textarea name="" placeholder="Texto da tarefa" class='texto'></textarea>
      </li>
    </ul>
    </div>
</div>

caso queira acrescentar na ul já existente você deve selecionar o ul e acrescentar seu li dentro dele assim:

function mais() {
  var x = document.createElement("li");
  var t = document.createTextNode("This is a paragraph.");
  x.appendChild(t);
  document.getElementById('tarefas').appendChild(x);
}
<div class="emcima">
  
<div class='A'>
    <h1>Tarefas</h1>
    <button type="button" onclick="mais()" class="btn-mais" >Adicionar</button>
</div>
    <div class='espaco'>
    <ul id="tarefas">
      
      <li class="tarefa">
        
        <header>
          <input type="text" class="titulo" placeholder="Título">
          <button type="button" onclick="enable()" class="btn-escrever">✒️</button>
          <button type="button" class="btn-apagar">✂️</button>
        </header>
        <textarea name="" placeholder="Texto da tarefa" class='texto'></textarea>
      </li>
    </ul>
    </div>
</div>

0

Uma das formas existentes de fazer isso:

você atribui a uma variável um código html, tome cuidado com os parênteses, isso pode dar problema. E não esqueça de fechar as chaves HTML também.

Foi utilizado JQuery, o atributo append.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
  
   var html =     "<div class='espaco'>";
   html +=    "<ul class='tarefas'>";
   html +=    "<li class='tarefa'>";
   html +=    "<input type='text' class='titulo' placeholder='Título'>";
   html +=    "<button type='button' onclick='enable()'' class='btn-escrever'>✒️</button>";
   html +=    "<button type='button' class='btn-apagar'>✂️</button>";
   html +=    "<textarea name='' placeholder='Texto da tarefa' class='texto'></textarea>";
   html +=    "</li>";
   html +=    "</ul>";
  html +=     "</div>";
  
       $('.imagens').append(html);
  
  });
});
</script>
</head>
<body>
<ul>
<li class="imagens">
  <input type="text" class="titulo" placeholder="Título">
  <button type="button" onclick="enable()" class="btn-escrever">✒️</button>
  <button type="button" class="btn-apagar">✂️</button>
</li>
</ul>
<button id="btn1">Criar</button>


</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .