Create a new node from text Javascript

Question

Suppose, I have a text file like this:

<button onclick="logIn.newTask();">Log In</button>

Now, in Javascript I want to load it in my HTML page with a simply document.appendChild(); like this:

var client = new XMLHttpRequest();
client.open('GET', 'http://localhost/button.txt');
client.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        document.appendChild(client.responseText);   // Load the button see above.
    }
}
client.send();

My problem is that this code gives me this error:

So, I try to find how I can traduce text to node but I can not find anything in this subject.

Short question:

I want to load some html's elements in my web page but I can not find any way to achieve this purpose.

Any help is very appreciated.

Tell me if you have some questions or comments.

You don't actually want to append it directly to the document, outside </body>. — SLaks
– SLaks, Commented Oct 24, 2017 at 17:07

SLaks · Accepted Answer · 2017-10-24 16:57:20Z

2

You need to create a new DOM node (using document.createElement(tagName)), then set its innerHTML to your string of HTML.

This will make the browser parse the HTML into child elements of the new node.

You can then append either the new node or its children to some existing node.

answered Oct 24, 2017 at 16:57

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

user8826585 · Accepted Answer · 2017-10-24 17:00:12Z

2

Why not try it like:

document.appendChild(document.createTextNode(client.responseText));

Keep it short and simple.

answered Oct 24, 2017 at 17:00

user8826585

483 bronze badges

4 Comments

SLaks Over a year ago

He probably wants it to be parsed as HTML.

user8826585 Over a year ago

or maybe it's just text

SphynxTech Over a year ago

@Slaks, what are the differences?

SLaks Over a year ago

@S.P.H.I.N.X: Learn about XSS vulnerabilities and escaping.

Collectives™ on Stack Overflow

Create a new node from text Javascript

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related