how to append raw html ('string') to html webpage

Question

I would like to add some html to append to a div in a function like this

const chatContainer = document.getElementById('chat');
    chatContainer.appendChild(`
        <div class="message-data align-center">
            <span class="message-data-name" >User joined</span>
        </div>
    `)

but the previous exemple do not work.

Arvind yadav · Accepted Answer · 2019-08-10 09:25:12Z

3

var innerdiv = `<div class="message-data align-center">
            <span class="message-data-name" >User joined</span>
        </div>`;
document.getElementById('chat').innerHTML += innerdiv;

<div id="chat"> </div>

answered Aug 10, 2019 at 9:25

Arvind yadav

10510 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

antonku · Accepted Answer · 2019-08-10 09:16:13Z

2

.appendChild expects the argument it is called with to be a DOM node. So you need to parse the string into the DOM node prior to appending it.

const parser = new DOMParser();
const chatContainer = document.getElementById('chat');
chatContainer.appendChild(parser.parseFromString(`
    <div class="message-data align-center">
        <span class="message-data-name" >User joined</span>
    </div>
`, 'text/xml').firstChild)

<div id='chat'>

answered Aug 10, 2019 at 9:16

antonku

7,7152 gold badges18 silver badges22 bronze badges

Comments

CertainPerformance · Accepted Answer · 2019-08-10 09:14:22Z

1

Use insertAdjacentHTML instead:

chatContainer.insertAdjacentHTML('beforeend', `
        <div class="message-data align-center">
            <span class="message-data-name" >User joined</span>
        </div>
    `);

<div id="chatContainer"></div>

You can also use

chatContainer.innerHTML += `< ...html string >`

, but that will corrupt any existing event listeners attached to any of chatContainer's children.

edited Aug 10, 2019 at 9:14

answered Aug 10, 2019 at 9:12

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

Andreas Over a year ago

.innerHTML += ...: ...and will force the browser to unnecessarily parse the complete content of chatContainer instead of only the added markup.

timlg07 · Accepted Answer · 2019-08-10 09:51:54Z

Why not use a function to append a new message to your chat?

function addMessage(chat, text){
    let msg = document.createElement("div");
    msg.classList.add("message-data", "align-center");
    // it's shorter to just insert the span as HTML-text directly here
    msg.innerHTML = `<span class="message-data-name">${text}</span>`
    return chat.appendChild(msg);
}

Or maybe use a chat-class with other methods as well?

var Chat = (function(){
  function Chat(selector){
    this.element = document.querySelector(selector);
  }
  Chat.prototype = {
    constructor: Chat,
    addMessage: function(text){
      let msg = document.createElement("div");
      msg.classList.add("message-data", "align-center");
      msg.innerHTML = `<span class="message-data-name">${text}</span>`;
      return this.element.appendChild(msg);
    }
  }
  return Chat;
}());

const chat = new Chat("#chat");
chat.addMessage("User joined");
chat.addMessage("FooBar");

#chat {
  background: #eee;
  border: 2px solid #000;
}

.align-center {
  text-align: center;
}

.message-data {
  border: 1px solid #000;
  padding: 5px;
}

<div id="chat"></div>

Collectives™ on Stack Overflow

how to append raw html ('string') to html webpage

4 Answers 4

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Related