Append html with javascript

Document: append() method

The Document.append() method inserts a set of Node objects or string objects after the last child of the document. String objects are inserted as equivalent Text nodes.

This method appends a child to a Document . To append to an arbitrary element in the tree, see Element.append() .

Syntax

append(param1) append(param1, param2) append(param1, param2, /* … ,*/ paramN) 

Parameters

A set of Node or string objects to insert.

Return value

Exceptions

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples

Appending a root element to a document

If you try to append an element to an existing HTML document, it might throw a HierarchyRequestError DOMException given a element already exists.

let html = document.createElement("html"); document.append(html); // HierarchyRequestError: The operation would yield an incorrect node tree. 

If you are creating a new document without any existing element, you can append a root HTML element (or a root SVG element):

let doc = new Document(); let html = document.createElement("html"); doc.append(html); doc.children; // HTMLCollection [] 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Element: append() method

The Element.append() method inserts a set of Node objects or string objects after the last child of the Element . String objects are inserted as equivalent Text nodes.

• Element.append() allows you to also append string objects, whereas Node.appendChild() only accepts Node objects.
• Element.append() has no return value, whereas Node.appendChild() returns the appended Node object.
• Element.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.

Syntax

append(param1) append(param1, param2) append(param1, param2, /* … ,*/ paramN) 

Parameters

A set of Node or string objects to insert.

Return value

Exceptions

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples

Appending an element

let div = document.createElement("div"); let p = document.createElement("p"); div.append(p); console.log(div.childNodes); // NodeList [ 
] 

Appending text

let div = document.createElement("div"); div.append("Some text"); console.log(div.textContent); // "Some text" 

Appending an element and text

let div = document.createElement("div"); let p = document.createElement("p"); div.append("Some text", p); console.log(div.childNodes); // NodeList [ #text "Some text", 
] 

The append method is unscopable

The append() method is not scoped into the with statement. See Symbol.unscopables for more information.

let div = document.createElement("div"); with (div)  append("foo"); > // ReferenceError: append is not defined 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to append HTML using JavaScript?

Writing HTML code is easy, but when it comes to dynamic changes over the pages like appending HTML, you need to use unusual strategies. JavaScript is a powerful language to get such kinds of jobs done. You can easily use JavaScript to put the HTML code inside the template. We will discuss this in this write-up.

Through JavaScript, there are two ways to attach HTML code to a div tag.

• Using innerHTML property
• Inserting adjacent HTML using the insertAdjacentHTML() function

Using innerHTML attribute

To use the innerHTML property to attach code to an element (div), first pick the element (div) where you wish to append the code. Then, using the += operator on innerHTML, add the code wrapped as strings.

Here’s the syntax of the attribute.

Let’s take an example of this. First, we are going to be referring to the HTML element by using the property :

Therefore, let’s create a div> and put a h1> tag and a button> inside it.

< h1 >This is a LinuxHint Tutorial

As you can see, we have given an id of “test” to the div tag and placed the text that says “Append Paragraph” inside the button. With these, we have the following result on the screen

JavaScript code:

We have a button linked to a function named “buttonPressed()” in the script. But, we have not defined this function, and this button does not do anything. So, let’s create this function in the script that would add a paragraph in this div and count how many times we have added this paragraph. Take a look at the following code.

document. getElementById ( «test» ) . innerHTML +=

«

Yoo have append this paragraph » + i + » times» ;

Note: We have created a counter variable “i”. This will be used to keep a check on how many times have we append this paragraph inside the div tag.

Now, if we run the code and press the button we get:

Note: This technique essentially removes all of the div’s content and replaces it with new stuff. Any listeners linked to the child nodes of that div will be lost as a result. That is why we always concatenate it.

Using AdjacentHTML method

The insertAdjacentHTML() function can also be used to attach HTML code to a div. This method is comes in handy when it comes to appending HTML at some specific place. So it takes two parameters in this method:

• The location (in the document) where the code should be inserted (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’).
  • afterbegin – right after the HTML element mentioned but inside the tag.
  • beforebegin – before the HTML element mentioned
  • afterend – after the closing tag of the HTML element
  • beforeend – inside the HTML element but before the closing tag

  This is the general syntax of the method

  HTMLelement.insertAdjacentHTML(‘LOCATION‘, ‘HTML CODE’);

  Let’s use the previous example. The same HTML code. However, this time the script would be slight different as:

  Note: Since we are using the previous example, the HTML code is exactly the same.

  JavaScript Code:

  i = 1 ;
  function buttonPressed ( ) {
  document. getElementById ( «test» ) . insertAdjacentHTML ( «beforebegin» ,
  «

  Appended » + i + » times Before Div

  » ) ;
  i ++;
  }

  Note: We are using the “beforebegin” property to append the tag before the start of the div.

  That’s it, you have learned how can we append some HTML code through JavaScript.

  Conclusion

  There are two methods that you can use to append the HTML code into a webpage. The first method is by using innerHTML while the second method is by using the AdjacentHTML method. In this article, we have taken examples of both the innerHTML and AdjacentHTML methods to append the HTML code into a webpage.

  About the author

  Shehroz Azam

  A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

  Источник

  How to append HTML using JavaScript?

  

  Writing HTML code is easy, but when it comes to dynamic changes over the pages like appending HTML, you need to use unusual strategies. JavaScript is a powerful language to get such kinds of jobs done. You can easily use JavaScript to put the HTML code inside the template. We will discuss this in this write-up.

  Through JavaScript, there are two ways to attach HTML code to a div tag.

  • Using innerHTML property
  • Inserting adjacent HTML using the insertAdjacentHTML() function

  Using innerHTML attribute

  To use the innerHTML property to attach code to an element (div), first pick the element (div) where you wish to append the code. Then, using the += operator on innerHTML, add the code wrapped as strings.

  Here’s the syntax of the attribute.

  Let’s take an example of this. First, we are going to be referring to the HTML element by using the property :

  Therefore, let’s create a div> and put a h1> tag and a button> inside it.

  < h1 >This is a LinuxHint Tutorial

  As you can see, we have given an id of “test” to the div tag and placed the text that says “Append Paragraph” inside the button. With these, we have the following result on the screen

  

  JavaScript code:

  We have a button linked to a function named “buttonPressed()” in the script. But, we have not defined this function, and this button does not do anything. So, let’s create this function in the script that would add a paragraph in this div and count how many times we have added this paragraph. Take a look at the following code.

  document. getElementById ( «test» ) . innerHTML +=

  «

  Yoo have append this paragraph » + i + » times» ;

  Note: We have created a counter variable “i”. This will be used to keep a check on how many times have we append this paragraph inside the div tag.

  Now, if we run the code and press the button we get:

  Note: This technique essentially removes all of the div’s content and replaces it with new stuff. Any listeners linked to the child nodes of that div will be lost as a result. That is why we always concatenate it.

  Using AdjacentHTML method

  The insertAdjacentHTML() function can also be used to attach HTML code to a div. This method is comes in handy when it comes to appending HTML at some specific place. So it takes two parameters in this method:

  • The location (in the document) where the code should be inserted (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’).
    • afterbegin – right after the HTML element mentioned but inside the tag.
    • beforebegin – before the HTML element mentioned
    • afterend – after the closing tag of the HTML element
    • beforeend – inside the HTML element but before the closing tag

    This is the general syntax of the method

    HTMLelement.insertAdjacentHTML(‘LOCATION‘, ‘HTML CODE’);

    Let’s use the previous example. The same HTML code. However, this time the script would be slight different as:

    Note: Since we are using the previous example, the HTML code is exactly the same.

    JavaScript Code:

    i = 1 ;
    function buttonPressed ( ) {
    document. getElementById ( «test» ) . insertAdjacentHTML ( «beforebegin» ,
    «

    Appended » + i + » times Before Div

    » ) ;
    i ++;
    }

    Note: We are using the “beforebegin” property to append the tag before the start of the div.

    That’s it, you have learned how can we append some HTML code through JavaScript.

    Conclusion

    There are two methods that you can use to append the HTML code into a webpage. The first method is by using innerHTML while the second method is by using the AdjacentHTML method. In this article, we have taken examples of both the innerHTML and AdjacentHTML methods to append the HTML code into a webpage.

    About the author

    Shehroz Azam

    A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

    Источник