Creating elements within elements with javascript

Question

Noob here. I searched on the internet a bit to find an answer to a question and I can't seem to find any (and that brings my hope down). So here I am. I was wondering if there is a way to create an HTML element with javascript, BUT inside the newly created HTML element to create also another HTML element with javascript. I guess you can call it elementception //wink

To be more specific, I would like to create a paragraph with text, but I would like to include links in that text (or possibly buttons?).

var para = document.createElement("P");
var t = document.createTextNode("This is a paragraph. Can I do this: <a href='blabla'>like so?</a>");
para.appendChild(t);
document.body.appendChild(para);

I tried writing HTML tags inside the strings of the TextNode, but even I can see that was stupid of me. Is there a noobish(simple) way to achieve this, or any way at all? If I'm asking the impossible, please be harsh and blunt about it, so that I never ask questions again. Thanks.

para.innerHTML = "This is a paragraph. You can do this: <a href='blabla'>like so</a>"; — blex
– blex, Commented Aug 25, 2015 at 20:43

Community · Accepted Answer · 2017-05-23 12:32:08Z

5

I would use the DOM API approach instead of using innerHTML for readability, maintainability and security reasons. Sure innerHTML has been around for a long time, but just because it is easy doesn't mean you should use it for everything.

As well, if you're going to be learning JavaScript you should get acquainted with the DOM API sooner than later. It will save you a lot of headaches down the road if you get the hang of the API now.

// Create the parent and cache it in a variable.
var para = document.createElement( "p" );

// Create a text node and append it to the child.
// We don't need to cache this one because we aren't accessing it again.
para.appendChild( document.createTextNode( "This is a paragraph. Can I do this: " ) );

// Create our link element and cache it in a variable.
var link = document.createElement( "a" );

// Set the link's href attribute.
link.setAttribute( 'href', 'blabla' );

// Create a text node and append it to the link
// We don't need to cache the text node.
link.appendChild( document.createTextNode( 'like so?' ));

// Append the link to the parent.
para.appendChild( link );

// Append the parent to the body.
document.body.appendChild( para );

DOM API methods used:

7 Comments

I hate JS Over a year ago

It seems more complicated your way. If I was a seasoned programmer or actually went to school for this, I would probably use your code because of the reasons you yourself have stated. However I am literally a newbie at coding, and for now I will stick with easy answers. However, that doesn't mean I am dismissing your way. I will keep it in mind should for some reason the easy solution fail me. And your help is appreciated :)

user4639281 Over a year ago

It's actually pretty straight-forward. I've updated my answer to further break down what my example is doing and I've supplied links to any documentation relevant to my answer.

durron597 Over a year ago

@IhateJS You only build up good habits by starting early. You don't want to find out that 5 years from now you're still doing everything the "fast, easy way" because you never learned the right way.

Matt Browne Over a year ago

innerHTML is not inherently insecure, it depends on how you're using it, and it also often gives better performance than using the DOM API. There are certainly times when it should be avoided, but there's not a general rule; there are pros and cons in different situations. In the particular example given in this question - simple, hard-coded HTML - I would just go with innerHTML - much simpler.

user4639281 Over a year ago

@MattBrowne I completely disagree. I suggest reading the last two links in my answer. New users should be encouraged to learn the DOM API instead of cheap tricks that are going to get them into trouble down the road. Overuse of innerHTML will have them back here asking more questions that could have been solved by simply not using innerHTML.

|

Matt Browne · Accepted Answer · 2015-08-25 20:45:01Z

4

The simplest way to do this would be:

para.innerHTML = 'This is a paragraph. Here is a link: <a href="blabla">like so?</a>';

answered Aug 25, 2015 at 20:45

Matt Browne

12.5k5 gold badges61 silver badges80 bronze badges

Comments

cнŝdk · Accepted Answer · 2015-08-26 17:18:31Z

2

Simply use innerHTML attribute to put HTML inside your element instead of createTexteNode, here's what you need:

var para = document.createElement("P");
para.innerHTML = "This is a paragraph. Can I do this: <a \"blabla\">like so?</a>";
document.body.appendChild(para);

Because as its name says, document.createTextNode() will only create a text and can't create HTML elements.

var para = document.createElement("P");
para.innerHTML = "This is a paragraph. Can I do this: <a href=\"blabla\">like so?</a>";
document.body.appendChild(para);

edited Aug 26, 2015 at 17:18

answered Aug 25, 2015 at 20:48

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Collectives™ on Stack Overflow

Creating elements within elements with javascript

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related