使用javascript在元素中创建元素

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

新手在这里。我在网上搜索了一下，想找到一个问题的答案，但似乎找不到(这让我的希望破灭了)。所以我在这里。我想知道是否有一种方法可以用javascript创建HTML元素，但是在新创建的HTML元素中，也可以用javascript创建另一个HTML元素。我想你可以叫它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.

我尝试在TextNode的字符串中编写HTML标记，但我也能看到，这太愚蠢了。有没有一种简单的方法来达到这个目的，或者有什么方法呢?如果我问的是不可能的事，请严厉点，直言不讳，这样我就不会再问问题了。谢谢。

3 个解决方案

#1

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

只需使用innerHTML属性将HTML放在元素中，而不是createTexteNode，以下是您需要的:

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.

因为顾名思义，document.createTextNode()只创建一个文本，不能创建HTML元素。

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

#2

The simplest way to do this would be:

最简单的办法是:

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

#3

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.

我将使用DOM API方法，而不是出于可读性、可维护性和安全性的原因使用innerHTML。当然innerHTML已经存在很长时间了，但是仅仅因为它很简单并不意味着你应该把它用于所有的事情。

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.

此外，如果您打算学习JavaScript，您应该尽早熟悉DOM API。如果您现在掌握了API的使用方法，那么以后就不会有那么多麻烦了。

// 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:

DOM API方法:

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

#1