How to use appendchild

Asked

Viewed 186 times

0

I wanted to know how to do so so that instead of appearing that sentence appears ul when clicking the button, what I should use in createTextNode for this to happen.

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>

javascript html

2 answers

0

missing to create ul

appendchild adds to the selected element what is declared in the sequence in parentheses. In case you had created a li element and placed it in the html body. However, usually li comes within a ul element. Then it was necessary to create the ul element and insert the li inside it as you can see below.

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>

if you want to add in the existing ul you should select ul and add your li inside it so:

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

One of the existing ways to do this:

you assign a variable an html code, take care of the parentheses, this may give problem. And do not forget to close the HTML keys too.

Jquery, the append attribute, was used.

<!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>

Browser other questions tagged javascript html

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