使用 javascript 在元素中创建元素答案

【问题标题】：Creating elements within elements with javascript使用 javascript 在元素中创建元素
【发布时间】：2015-11-19 17:28:24
【问题描述】：

这里是菜鸟。我在互联网上搜索了一下以找到问题的答案，但我似乎找不到任何答案（这让我的希望落空了）。所以我在这里。我想知道是否有一种方法可以使用 javascript 创建 HTML 元素，但在新创建的 HTML 元素中也可以使用 javascript 创建另一个 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 标记，但即使我也能看出这对我来说很愚蠢。有没有一种简单（简单）的方式来实现这一点，或者任何方式？如果我问的是不可能的事情，请对它严厉和直言不讳，这样我就不会再问问题了。谢谢。

【问题讨论】：

para.innerHTML = "This is a paragraph. You can do this: <a href='blabla'>like so</a>";

标签： javascript html dom elements

【解决方案1】：

最简单的方法是：

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

【讨论】：

【解决方案2】：

为了可读性、可维护性和security reasons，我会使用DOM API 方法而不是innerHTML。当然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 方法：

进一步阅读：

【讨论】：

你的方式似乎更复杂。如果我是一位经验丰富的程序员或实际上为此上过学，我可能会使用您的代码，因为您自己已经说明了原因。但是，我实际上是编码的新手，现在我将坚持简单的答案。但是，这并不意味着我会拒绝你的方式。如果由于某种原因简单的解决方案使我失败，我会牢记这一点。感谢您的帮助:)
实际上非常简单。我更新了我的答案以进一步分解我的示例正在做什么，并且我提供了与我的答案相关的任何文档的链接。
@IhateJS 只有尽早开始才能养成良好的习惯。您不想发现 5 年后您仍然以“快速、简单的方式”做所有事情，因为您从未学会正确的方式。
innerHTML 并非天生不安全，这取决于您如何使用它，而且它通常也比使用 DOM API 提供更好的性能。当然有时应该避免它，但没有一般规则；在不同的情况下各有利弊。在这个问题中给出的特定示例中 - 简单的硬编码 HTML - 我会选择 innerHTML - 更简单。
@MattBrowne 我完全不同意。我建议阅读我的答案中的最后两个链接。应该鼓励新用户学习 DOM API，而不是那些会让他们陷入困境的廉价技巧。过度使用 innerHTML 会让他们回到这里提出更多问题，而这些问题本来可以通过不使用 innerHTML 来解决。

【解决方案3】：

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

【讨论】：