使用 javascript 在元素内创建元素

Question

这里是菜鸟。我在互联网上搜索了一下以找到问题的答案，但我似乎找不到任何答案（这让我失望了）。所以我在这里。我想知道是否有一种方法可以用 javascript 创建一个 HTML 元素，但是在新创建的 HTML 元素中也可以用 [=22= 创建另一个 HTML 元素].我想你可以称它为 elementception //wink

更具体地说，我想创建一个带有文本的段落，但我想在该文本中包含链接（或者可能是按钮？）。

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

我尝试在 TextNode 的字符串中写入 HTML 标记，但即使我也能看出我的愚蠢行为。有没有一种笨拙的（简单的）方法来实现这一点，或者有什么方法吗？如果我问的是不可能的事情，请严厉而直截了当，这样我就再也不会问问题了。谢谢

Answer 1

最简单的方法是：

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

Answer 2

只需使用 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);

因为顾名思义，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);

Answer 3

我会使用 DOM API approach instead of using innerHTML for readability, maintainability and security reasons。当然 innerHTML 已经存在很长时间了，但仅仅因为它简单并不意味着您应该将它用于所有事情。

另外，如果您要学习 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 使用的方法：

进一步阅读：

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

使用 javascript 在元素内创建元素

Creating elements within elements with javascript

html

javascript

dom

elements