使用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.

Answer 1

最简单的方法是：

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

Answer 2

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:

• Document.createElement()
• Document.createTextNode()
• Node.appendChild()
• Element.setAttribute()

Further reading:

• Document Object Model (DOM)
• Element.innerHTML Security Considerations
• Advantages of createElement over innerHTML?

Answer 3

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);