javascript add append to html

the forgetful dev answered on October 13, 2020 Popularity 9/10 Helpfulness 4/10

answer javascript add append to html

related javascript html append

related append HTML elements in JavaScript

related JavaScript append HTML

javascript add append to html

Comment

element.innerHTML += '<p>additional html to add at the end</p>'

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: add append html javascript

Link to this answer
Share Copy Link

Contributed on Jan 31 2023

the forgetful dev

0 Answers Avg Quality 2/10

Closely Related Answers

javascript html append

Comment

// The classic createElement
// -------------------------
// create a paragraph element using document.createElement
const elem = document.createElement(`p`);
elem.id = `myBrandnewDiv1`;

// put in some text
elem.appendChild(document.createTextNode(`My brand new div #1`));

// append some html (for demo, preferrably don't use innerHTML)
elem.innerHTML += ` =&gt; created using 
  <code>document.createElement</code>`;

// append a new paragraph within #myBrandNewDiv1
const nested = elem.appendChild(document.createElement(`p`));
nested.classList.add(`nested`);
// add some text to that
nested.textContent = `I am nested!`;
// the elements are still in memory, now add the 
// whole enchillada to the document
document.body.appendChild(elem);

// insertAdjacentHTML
// ------------------
// nest an element within the nested div
nested.insertAdjacentHTML(`afterbegin`, 
  `<div id="nestedWithin#nested">
    This text will appear <i>above</i> the text of 
    my parent, that being div#nested.
    Someone had the nerve to insert me using 
    <code>insertAdjacentHTML</code>
   </div>`);

// Object.assign
// -------------
// Use Object.assign to create an element and
// assign properties/html to it in one go
const newElem = Object.assign(
  document.createElement(`div`), 
  { id: `myBrandnewDiv2`, 
    innerHTML: `div#myBrandnewDiv2 signing in. 
      I was <i>assigned</i> using <code>Object.assign</code>&hellip;`});
document.body.appendChild(newElem);

// insertAdjacentElement combined with Object.assign
// -------------------------------------------------
// use the above technique combined with insertAdjacentElement
newElem.insertAdjacentElement(
  `beforeend`,
    Object.assign(document.createElement(`span`), 
      { id: `myBrandnewnested2_nested`, 
        innerHTML: `<br>Me too! And appended I was 
          with <code>insertAdjacentElement</code>` })
);

// createDocumentFragment
// ----------------------
// Use a document fragment to create/inject html
const fragment = document.createDocumentFragment();
const mdnLnk = `https://developer.mozilla.org/en-US/` +
    `docs/Web/API/Document/createDocumentFragment`;
fragment.appendChild(
  Object.assign(
    document.createElement(`p`), 
    {innerHTML: `Regards from <code>createDocumentFragment</code> 
    (see <a href="${mdnLnk}">MDN</a>)`})
);
document.querySelector(`#myBrandnewDiv2`).appendChild(fragment);

// Create, but don't inject
// ------------------------
const virtual = Object.assign(
      document.createElement(`p`), 
      { innerHTML: `       
        <a href="#id1">id1</a>
        <div id="id2">Hi!</div>
        <p id="id3">Hi 2!</p>`,
        classList: [`xyz`], } );

const prepareHtml4Reporting = html => 
  html.replace(/</g, `&lt;`)
    .replace(/\n\s+/g, `\n`)
    .replace(/\n\n/g, `\n`);
    
document.body.insertAdjacentHTML(
  `beforeend`,
  `<h3>html only</h3><pre>${
     prepareHtml4Reporting(virtual.innerHTML)}</pre>`);

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: append ap

Link to this answer
Share Copy Link

Contributed on Oct 08 2022

Busy Beaver

0 Answers Avg Quality 2/10

append HTML elements in JavaScript

Comment

let div = document.createElement("div")
div.append("Some text")

console.log(div.textContent) // "Some text"

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: developer.mozilla.org

Tags: append ap

Link to this answer
Share Copy Link

Contributed on Apr 17 2022

WootKennziz

0 Answers Avg Quality 2/10

JavaScript append HTML

Comment

        
            
        
     let app = document.querySelector('#app');
app.append('append() Text Demo');

console.log(app.textContent);

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.javascripttutorial.net

Tags: append ap

Link to this answer
Share Copy Link

Contributed on Oct 13 2020

SAMER SAEID

0 Answers Avg Quality 2/10

javascript add append to html

Contents

More Related Answers

javascript add append to html

Closely Related Answers

javascript html append

append HTML elements in JavaScript

JavaScript append HTML

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.