Add/Remove HTML Inside Div Using JavaScript

Add/remove HTML inside div using JavaScript

You can do something like this.

function addRow() {
  const div = document.createElement('div');

  div.className = 'row';

  div.innerHTML = `
    <input type="text" name="name" value="" />
    <input type="text" name="value" value="" />
    <label> 
      <input type="checkbox" name="check" value="1" /> Checked? 
    </label>
    <input type="button" value="-" onclick="removeRow(this)" />
  `;

  document.getElementById('content').appendChild(div);
}

function removeRow(input) {
  document.getElementById('content').removeChild(input.parentNode);
}

How to remove elements inside innerHTML of a DIV using js/jquery?

If you want to remove the styles from the html in your code example you can do the following.

document.querySelector('#loadRepy style').remove()

How do I clear the content of a div using JavaScript?

Just Javascript (as requested)

Add this function somewhere on your page (preferably in the <head>)

function clearBox(elementID)
{
    document.getElementById(elementID).innerHTML = "";
}

Then add the button on click event:

<button onclick="clearBox('cart_item')" />

In JQuery (for reference)

If you prefer JQuery you could do:

$("#cart_item").html("");

insert/remove HTML content between div tags

If you're replacing the contents of the div and have the HTML as a string you can use the following:

document.getElementById('mydiv').innerHTML = '<span class="prego">Something</span>';

Add and remove div from body in javascript

Try it like this, it will work:

DEMO

function $(el) {
    return document.getElementById(el);
}

function removeit() {
    alert("remove called");
    var child = $('second');
    child.remove();

}

function addContainer() {
    console.log("addContainer called");
    var aContainer = document.createElement('div');
    aContainer.setAttribute('id', 'second');
    aContainer.innerHTML = "<a href=\"#\" onclick=\"removeit()\">second</a>";
    document.body.appendChild(aContainer);
}

SIDENOTE:

Calling remove() as your function won't work as it is a native javascript function.
You didn't actually remove the div in your function, too!

Inserting HTML into a div

I think this is what you want:

document.getElementById('tag-id').innerHTML = '<ol><li>html data</li></ol>';

Keep in mind that innerHTML is not accessible for all types of tags when using IE. (table elements for example)

How to remove an incremental element in HTML using JavaScript

You can use data attribute on delete button to keep reference on added items when you want to delete them.

function update(e) {
  var selObj = document.getElementById("skill_tags");
  var selVal = selObj.options[selObj.selectedIndex].text;
  let counter = 0;
  document.getElementById("textarea").innerHTML +=
    `<div class="tags_inline" id="${e.value}"><li class="list-inline-item"><span class="badge badge-dark">"${selVal}"<button data-select-id="${e.value}" class="fa fa-times-circle text-white" id="delete" onclick=remove_tag(this) >remove</button></span></li></div>`;
}

function remove_tag(e) {
  document.getElementById(e.dataset["selectId"]).remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resume-skill-item">
  <h5>
      <ul class="list-inline">
          <div align="right">
              <select id="skill_tags" onchange="update(this)">
                  <option selected="true" disabled="disabled">*Select All That Applies</option>
                  <option value="mechanic">Mechanic</option>
                  <option value="appliance_repairer">Appliance Repairer</option>
                  <option value="carpenter">Carpenter</option>
                  <option value="plumber">Plumber</option>
                  <option value="technician">Technician</option>
              </select>
          </div>
      </ul>
      <div id="textarea" class="large-single-textarea">
      </div>
  </h5>
</div>

adding and deleting div dynamically on click on x button inside a div using javascript

See this example: https://codepen.io/dsomekh/pen/GEVNWb

function Clone() {

  var clone = document.getElementById('thediv').cloneNode(true); // "deep" clone  document.getElementById("container").appendChild(clone);}
function Delete(button) {  var parent = button.parentNode;  var grand_father = parent.parentNode;  grand_father.removeChild(parent);}

.mydiv {  border: 2px solid red;}

<div class="container" id="container">  <div class="mydiv" id="thediv">    I am the div    <button type="button" onclick="Clone()" ) ">Clone</button>      <button type="button " onclick="Delete(this) ")">Delete</button>  </div>  <div>

Add/Remove HTML Inside Div Using JavaScript