How to Append Data to Div in JavaScript

To append data to an existing div, select it and choose a method based on whether the new value is plain text or trusted HTML. For ordinary text, textContent or a text node avoids HTML parsing. Use insertAdjacentHTML when you intentionally need to add markup. The examples below assume the page contains a <div id="myDiv"> element before the script runs. (JavaScript)

Choose a Method for the Content You Are Adding

Use textContent or createTextNode for user input and other plain text. These APIs create text rather than interpreting characters such as < as markup. For a new element with text or attributes, create the element and append it as a node.

Use insertAdjacentHTML when you have an HTML string that you control and need parsed into elements. Avoid innerHTML += for appending to a populated element: reading and setting innerHTML reparses its contents and replaces descendant nodes. That removes those descendants from the replacement tree, but existing JavaScript references still point to the detached nodes. Listeners remain attached to those old nodes; they do not apply to the replacement nodes. The right choice depends on the kind of content, not a general speed ranking.

Append Plain Text with textContent or appendChild

This example creates a paragraph, assigns its text, and appends the new node to the selected div. getElementById returns null if the page has no matching element, so check the result before using it.

Run this example in a page containing the target element:

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    const paragraph = document.createElement("p");
    paragraph.textContent = "A new paragraph.";
    target.appendChild(paragraph);
  }
}

This browser example is unexecuted in the supplied packet. When the target exists, it adds a paragraph whose content is text. You can also make a text node directly with document.createTextNode("More text") and pass that node to appendChild when you do not need a wrapper element.

Append HTML with insertAdjacentHTML

Call insertAdjacentHTML on the target and pass both a position and an HTML string. beforeend places parsed nodes inside the div, after its current children. The other positions are afterbegin (inside, before its children), beforebegin (immediately outside, before the element), and afterend (immediately outside, after the element).

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.insertAdjacentHTML("beforeend", "<p>A new paragraph.</p>");
  }
}

This browser example is unexecuted in the supplied packet. Use this method only when parsing the supplied string as HTML is intended; it does not sanitize untrusted input. The beforeend position is the one to use when the new markup belongs inside the div at its end.

Use innerHTML Carefully

innerHTML exposes an element’s markup as a string. Concatenating a string and assigning it back may look like appending, but the browser parses and replaces the element’s descendants. Existing descendant nodes are detached from the replacement tree, but references still point to those old nodes and their listeners remain attached to them; those listeners do not apply to the replacement nodes. Avoid using innerHTML with untrusted data because the browser treats the value as markup, which can create cross-site scripting (XSS) vulnerabilities.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.innerHTML = target.innerHTML + "<p>A new paragraph.</p>";
  }
}

This browser example is unexecuted in the supplied packet. It illustrates the reassignment behavior; it is not the preferred way to preserve existing child nodes while appending. For dynamic text, create an element, set its textContent, and append the element instead.

Append Content with jQuery

If a project already uses jQuery, .append() adds content to the end of each matched element. A string passed to .append() is parsed as HTML, so do not place untrusted strings in it. For plain text, create a DOM node and append that node, or use the native textContent approach above.

if (typeof window !== "undefined" && window.jQuery) {
  const target = jQuery("#myDiv");
  if (target.length) {
    target.append("<p>A new paragraph.</p>");
  }
}

This browser example is unexecuted in the supplied packet. It requires jQuery to be loaded and a matching element to exist; if either is absent, the guarded code does nothing.

Verify the Result and Avoid Common Mistakes

Confirm that the selector matches the intended element and that the script runs after the element is available, for example by placing the script after the div or waiting for the document to load. getElementById("myDiv") selects an element by its ID; querySelector("#myDiv") is an equivalent selector-based option. A missing match should be handled before calling a method on the result.

For plain text, prefer textContent or a text node so characters remain text. For markup, use insertAdjacentHTML("beforeend", html) when inserting at the end inside the target, and ensure the HTML is trusted or sanitized by a suitable policy. Avoid treating innerHTML += as a node-preserving append operation. Choose jQuery’s .append() only when the project already includes jQuery and the content is intended to be parsed as HTML. These methods cover appending content; removing an element is a separate DOM operation.