3

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.

I hate JS
  • 35
  • 5

3 Answers3

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>';
Matt Browne
  • 12,169
  • 4
  • 59
  • 75
4

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:

Further reading:

Community
  • 1
  • 1
  • 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 :) – I hate JS Aug 25 '15 at 21:10
  • 1
    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. –  Aug 25 '15 at 22:07
  • 1
    @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. – durron597 Aug 25 '15 at 22:15
  • `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. – Matt Browne Aug 26 '15 at 02:21
  • @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. –  Aug 26 '15 at 14:51
  • I like [this answer](http://stackoverflow.com/a/2946670/560114) in your above link. It points out the drawbacks of `innerHTML` but also points out that it can make the code more readable and performant...and I would add that if you have a hardcoded string and don't need to access inner elements programmatically, then those disadvantages of `innerHTML` don't apply. Of course, if you're adding a lot of dynamic HTML to a page and readability is a priority (as it should be), then using a templating library would be better. – Matt Browne Aug 26 '15 at 20:46
  • The point is that, sure you *can* use it for many things without running into issues *if* you know what all of the drawbacks are, but new users don't know the drawbacks so telling them to blindly use `innerHTML` is setting them up for failure. Providing the methods and information necessary to achieve the desired effect the *correct* way is much more useful. Don't get me wrong, there are IMO very specific use cases for `innerHTML`, such as removing all event listeners from an element, but if you're a programmer using Vanilla JavaScript, you should learn and use the DOM API if possible @Matt –  Aug 26 '15 at 20:51
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);
cнŝdk
  • 31,391
  • 7
  • 56
  • 78