I want to insert the card into container using javascript. How do I do it. or make those card display in flex. So it's not like shown in below pic. I have used insertAdjancentHTML to insert the data in note class using javascript. However i'm unable to put them in container.

const addBtn = document.getElementById("add");

const addNewNote = (text = "") => {
  const note = document.createElement("div");
  note.classList.add("note");

  const htmlData = `<div  style="width: 18rem">
        <div >
          <div >
            <h5 >Card title</h5>
            <span >
              <button >
                <i ></i>
              </button>
              <button >
                <i ></i>
              </button>
            </span>
          </div>
          <hr />

          <p >
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
        </div>
      </div>`;

  note.insertAdjacentHTML("afterbegin", htmlData);
  console.log(note);

  document.body.appendChild(note);
};

addBtn.addEventListener("click", () => {
  addNewNote();
});

CodePudding user response：

Firstly, just use innerHTML - it's an empty element:

note.innerHTML = htmlData;

Secondly, you need to select the element to append this note to. Add an ID:

<div  id="noteContainer">

And append it like so:

document.getElementById("noteContainer").appendChild(note);

CodePudding user response：

You can add an identifier to the div an use the appendChild to this div instead of the body of the document

<div id="myDiv" ></div>

And at the end of your function

document.getElementById("myDiv").appendChild(note);

---

Working example

const button = document.getElementById("addButton")

const addNote = () => {
  const myElement = document.createElement('p')
  myElement.innerHTML = "Hello world !"
  
  const div = document.getElementById("myDiv")
  div.appendChild(myElement)
}

button.addEventListener("click", addNote)

<button id="addButton">Add element</button>

<div id="myDiv"></div>

CodePudding user response：

1. Cache the container element.
2. Return the note HTML from the function (no need to specifically create an element - just wrap the note HTML in a .note container), and then add that HTML to the container.

(In this example I've used unicode for the icons, and a randomiser to provide some text to the note.)

const container = document.querySelector('.container');
const addBtn = document.querySelector('.add');

function createNote(text = '') {
  return`
    <div >
      <div  style="width: 18rem">
        <div >
          <div >
            <h5 >Card title</h5>
            <span >
              <button >&#128393;</button>
              <button >&#128465;</button>
            </span>
          </div>
          <hr />
          <p >${text}</p>
        </div>
      </div>
    </div>
  `;
};

function rndText() {
  const text = ['Hallo world', 'Hovercraft full of eels', 'Two enthusiastic thumbs up', 'Don\'t let yourself get attached to anything you are not willing to walk out on in 30 seconds flat if you feel the heat around the corner'];
  const rnd = Math.round(Math.random() * ((text.length - 1) - 0)   0);
  return text[rnd];
}

addBtn.addEventListener('click', () => {
  const note = createNote(rndText());
  container.insertAdjacentHTML('afterbegin', note);
});

<div>
  <button type="button" >Add note</button>
  <div ></div>
</div>