JAVASCRIPT

javascript html append

// The classic createElement
// -------------------------
// create a paragraph element using document.createElement
const elem = document.createElement(`p`);
elem.id = `myBrandnewDiv1`;

// put in some text
elem.appendChild(document.createTextNode(`My brand new div #1`));

// append some html (for demo, preferrably don't use innerHTML)
elem.innerHTML += ` => created using 
  <code>document.createElement</code>`;

// append a new paragraph within #myBrandNewDiv1
const nested = elem.appendChild(document.createElement(`p`));
nested.classList.add(`nested`);
// add some text to that
nested.textContent = `I am nested!`;
// the elements are still in memory, now add the 
// whole enchillada to the document
document.body.appendChild(elem);

// insertAdjacentHTML
// ------------------
// nest an element within the nested div
nested.insertAdjacentHTML(`afterbegin`, 
  `<div id="nestedWithin#nested">
    This text will appear <i>above</i> the text of 
    my parent, that being div#nested.
    Someone had the nerve to insert me using 
    <code>insertAdjacentHTML</code>
   </div>`);

// Object.assign
// -------------
// Use Object.assign to create an element and
// assign properties/html to it in one go
const newElem = Object.assign(
  document.createElement(`div`), 
  { id: `myBrandnewDiv2`, 
    innerHTML: `div#myBrandnewDiv2 signing in. 
      I was <i>assigned</i> using <code>Object.assign</code>&hellip;`});
document.body.appendChild(newElem);

// insertAdjacentElement combined with Object.assign
// -------------------------------------------------
// use the above technique combined with insertAdjacentElement
newElem.insertAdjacentElement(
  `beforeend`,
    Object.assign(document.createElement(`span`), 
      { id: `myBrandnewnested2_nested`, 
        innerHTML: `<br>Me too! And appended I was 
          with <code>insertAdjacentElement</code>` })
);

// createDocumentFragment
// ----------------------
// Use a document fragment to create/inject html
const fragment = document.createDocumentFragment();
const mdnLnk = `https://developer.mozilla.org/en-US/` +
    `docs/Web/API/Document/createDocumentFragment`;
fragment.appendChild(
  Object.assign(
    document.createElement(`p`), 
    {innerHTML: `Regards from <code>createDocumentFragment</code> 
    (see <a href="${mdnLnk}">MDN</a>)`})
);
document.querySelector(`#myBrandnewDiv2`).appendChild(fragment);

// Create, but don't inject
// ------------------------
const virtual = Object.assign(
      document.createElement(`p`), 
      { innerHTML: `       
        <a href="#id1">id1</a>
        <div id="id2">Hi!</div>
        <p id="id3">Hi 2!</p>`,
        classList: [`xyz`], } );

const prepareHtml4Reporting = html => 
  html.replace(/</g, `&lt;`)
    .replace(/
s+/g, `
`)
    .replace(/

/g, `
`);
    
document.body.insertAdjacentHTML(
  `beforeend`,
  `<h3>html only</h3><pre>${
     prepareHtml4Reporting(virtual.innerHTML)}</pre>`);

append javascript example

const formDataId = document.getElementById("userForm");
const formData = new FormData(formDataId);
formData.append("isAdmin", 1);

how to append in javascript

var list=[1, 2, 3, 4, 5];
list.push(6);
// .push allows you to add a value to the end of a list 

js append sample

const container = document.querySelector(".container");
const songsContainer = container.querySelector(".songs-container");
const addButton = container.querySelector(".input__btn_action_add");
const resetButton = container.querySelector(".input__btn_action_reset");
const noSongsElement = container.querySelector(".no-songs");

function renderHasSongs() {
  resetButton.removeAttribute("disabled");
  resetButton.classList.remove("input__btn_disabled");
  noSongsElement.classList.add("no-songs_hidden");
}

function renderNoSongs() {
  resetButton.setAttribute("disabled", true);
  resetButton.classList.add("input__btn_disabled");
  noSongsElement.classList.remove("no-songs_hidden");
}

function addSong(artistValue, titleValue) {
  const songTemplate = document.querySelector("#song-template").content;
  const songElement = songTemplate.querySelector('.song').cloneNode(true);

  songElement.querySelector(".song__artist").textContent = artistValue;
   songElement.querySelector(".song__title").textContent = titleValue;
  
  songsContainer.append(songElement); 
}

addButton.addEventListener("click", function () {
  const artist = document.querySelector(".input__text_type_artist");
  const title = document.querySelector(".input__text_type_title");

  addSong(artist.value, title.value);
  renderHasSongs();

  artist.value = "";
  title.value = "";
});

resetButton.addEventListener("click", function () {
  const songs = document.querySelectorAll(".song")

  songs.forEach((item) => {
    item.remove();
  });

  renderNoSongs();
});