profi.spage.me

JS jQuery create and add a new element at the beginning or end of a DIV container

jQuery create and add a new element of a DIV container

JQuery makes this easier.

In order to create and insert a new tag at the beginning of the container, you must use the append() command.

$("parent tag").prepend("<new teg>");
$("#main").prepend("<div>");
$("#main").prepend("<div id='box1'>1 block</div>");

In order to create and insert a new tag at the end of the container, you must use command append().

$("parent tag").append("<new teg>");
$("#main").append("<div>");
$("#main").append("<div id='box1'>1 block</div>");

JS create and add a new element of a DIV container

JS create a new element at the beginning of a DIV container

In order to insert at the beginning of the parent container, we use the insertBefore(newElement, FirstChild) JS function.

// Get a reference to the element in which we want to insert a new node
var parentElement = document.getElementById('parentElement');

// Get a reference to the first child
var FirstChild = parentElement.firstChild;

// Create a new element
var newElement = document.createElement("div");

// Insert the new element before the first child
parentElement.insertBefore(newElement, FirstChild);

JScreate a new element at the end of a DIV container

To insert at the end of the parent container, we use the appendChild(div) JS function.

var parentElement = document.getElementById('parentElement');
var newElement = document.createElement('div');
parentElement.appendChild(newElement);

Sample code.

Sample code to add an element to the beginning of the container at JQuery.

<STYLE>
#parent_div {
  border-color: red;
    border-style: solid;
    padding: 10px;
}
#parent_div p {
  border-color: green;
  border-style: solid;
  padding: 10px;
}
</STYLE>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<SCRIPT>
function add_tag() {
  var now = new Date();
  $("#parent_div").prepend("<p>new block create" + now + "</p>");
}
</SCRIPT>
<DIV id="parent_div">Div PARENT contaner.</DIV><BR>
<BUTTON onClick="add_tag();"> add New Tag P beginning Parent Div</BUTTON>

DEMO

Sample code to add an element to the end of the container at JQuery.

<STYLE>
#parent_div {
	border-color: red;
    border-style: solid;
    padding: 10px;
}
#parent_div p {
	border-color: green;
	border-style: solid;
	padding: 10px;
}
</STYLE>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<SCRIPT>
function add_tag() {
  var now = new Date();
  $("#parent_div").append("<p>new block create" + now + "</p>");
}
</SCRIPT>
<DIV id="parent_div">Div PARENT contaner.</DIV><BR>
<BUTTON onClick="add_tag();"> add New Tag P end Parent Div</BUTTON>

DEMO

Sample code to add an element to the beginning of the container at JavaScript.

<STYLE>
#parent_div {
	border-color: red;
    border-style: solid;
    padding: 10px;
    width: 500px;
}
#parent_div p {
	border-color: green;
	border-style: solid;
	padding: 10px;
}
</STYLE>
<SCRIPT>
function add_tag() {
  var now = new Date();
  var parentElement = document.getElementById("parent_div");
  var FirstChild = parentElement.firstChild;
  var newElement = document.createElement("p");
  parentElement.insertBefore(newElement, FirstChild);
  var txt = document.createTextNode(now);
  newElement.appendChild(txt);
}
</SCRIPT>
<DIV id="parent_div">Div PARENT contaner.</DIV><BR>
<BUTTON onClick="add_tag();"> add New Tag P beginning Parent Div JS</BUTTON>

DEMO

Sample code to add an element to the end of the container at JavaScript.

<STYLE>
#parent_div {
	border-color: red;
    border-style: solid;
    padding: 10px;
    width: 500px;
}
#parent_div p {
	border-color: green;
	border-style: solid;
	padding: 10px;
}
</STYLE>
<SCRIPT>
function add_tag() {
  var now = new Date();
  var parentElement = document.getElementById("parent_div");
  var newElement = document.createElement("p");
  parentElement.appendChild(newElement);
  var txt = document.createTextNode(now);
  newElement.appendChild(txt);
}
</SCRIPT>
<DIV id="parent_div">Div PARENT contaner.</DIV><BR>
<BUTTON onClick="add_tag();"> add New Tag P end Parent Div JS</BUTTON>

DEMO